前端介面設計

來源狀態

可用來源

資源類型

Skill

與類似 Skill 有什麼不同？

• PPTX 簡報

  PPTX 產出簡報投影片；Frontend Design 設計可互動網頁，並非簡報檔案。

來源描述的能力

這些是來源描述的可能操作，不代表 2lus 已授予權限或已測試。

尚未列出能力，請審查原始來源。

這個 Skill 是什麼？

適合有品牌與版面目標的前端設計工作。

可以做什麼？何時適合使用？

• 品牌首頁
• 管理儀表板
• 活動頁面

如何使用

1. 提供品牌、受眾與技術限制。
2. 先確認版面草圖與元件狀態。
3. 審查實作、鍵盤操作與窄螢幕排版。

使用前你需要準備

• 介面程式與設計目標
• 目標裝置和操作方式

你可以替換：

[component]、[screen size]

環境與相依需求

• 可修改的前端專案及所需套件。

使用範例與 Prompt

以下是 2lus 撰寫的示範需求；請替換為你有權處理的檔案與專案，不代表已執行或保證結果。

入門

為社區圖書館設計簡潔的首頁，先列出資訊優先順序。

實務

在既有 React 設定頁增加錯誤與空白狀態，不變更 API。

進階

為商品目錄提出三種版面，選定後實作鍵盤導覽與手機排版，列出人工驗收項目。

實用提醒

• 先指定字級、間距與色彩規則。

限制與注意事項

• 設計建議仍需人工檢查無障礙與瀏覽器相容性。

安全注意事項

• 使用有授權的圖片字型；不要擅自新增追蹤腳本。

使用與設定

此條目不提供已確認的通用安裝指令；請依官方文件與 Agent 版本操作。

支援平台

Claude Code — 文件記載，未做實機相容性測試 官方文件 ↗

來源與授權

來源查核日期（非安全認證）: 2026-09-29

Apache-2.0

相關 Skills

• Web Design Guidelines 介面檢查
• React 元件組合模式

Source status

Active source

Resource type

Skill

How is this different from similar skills?

• PPTX

  PPTX produces slide decks; Frontend Design creates interactive web interfaces rather than presentation files.

Documented capabilities

These are operations described upstream, not permissions granted or tested by 2lus.

Capabilities not declared here; review the original source.

What is this skill?

Use for frontend design with clear branding and layout goals.

Use cases and when to use it

• Brand homepage
• Admin dashboard
• Event landing page

How to use it

1. Provide brand, audience and technical constraints.
2. Agree on layout sketches and component states.
3. Review implementation, keyboard access and narrow layouts.

What you need

• Interface code and design goals
• Target devices and interaction methods

You can replace:

[component], [screen size]

Environment and dependencies

• An editable frontend project and its dependencies.

Usage and prompt examples

These example requests were written by 2lus. Substitute files and projects you may use; examples are not executed results or guarantees.

Beginner

Design a restrained homepage for a community library; first prioritize its information.

Practical

Add error and empty states to an existing React settings page without changing APIs.

Advanced

Propose three product-catalog layouts; implement the chosen one with keyboard navigation and mobile layouts, then list manual acceptance checks.

Tips

• Specify typography, spacing and color rules first.

Limitations

• Accessibility and browser compatibility still need human review.

Security notes

• Use licensed images/fonts; do not silently add tracking scripts.

Usage and setup

No verified universal installation command is provided for this entry. Follow the official documentation for your agent version.

Supported agents

Claude Code — Documented; not runtime-tested Documentation ↗

Sources and license

Source check date (not a safety certification): 2026-09-29

Apache-2.0

Related skills

• Web Design Guidelines
• React Composition Patterns