设计产品页面
使用 Frontend Design skill 以有辨识度的视觉系统重新设计这个仪表盘，同时保持现有数据和交互不变。
Claude CodeCodex其他 Skill设计 / 图像active
Frontend Design
可在 Claude Code 和 Codex 中使用的前端设计 Skill，用于创建具有辨识度、生产级的组件、页面、应用和视觉类 Web 界面。
概览
当前端任务需要精致视觉方向和实现，并避免通用 AI 风格界面时，可参考此 Skill。
这个 Skill 可以做什么
- 组织高质量前端设计思路。
- 支持 Web 组件、页面、仪表盘、落地页和应用 UI。
- 强调有辨识度的视觉系统，而不是通用布局。
- 将美学方向与生产级前端实现连接起来。
最佳使用场景
- 根据粗略需求设计精致页面或组件。
- 改善显得通用或未完成的 Web UI。
- 为小型产品界面创建一致的视觉系统。
不适合
- 没有视觉界面的纯后端任务。
- 盲目复制现有品牌或专有设计系统。
- 生成与前端实现无关的图像。
输入
- 前端需求、目标受众和期望视觉方向。
- 现有 UI 约束、框架和组件上下文。
- 可用时提供参考风格目标或示例。
输出
- 前端设计方向和实现指导。
- 在 Claude Code 或 Codex 中使用时输出精致 UI 代码或组件/页面结构。
- 布局、间距、排版和交互状态等视觉细节。
兼容性
Tools: Claude Code, Codex
Environments: Claude Code, Codex CLI or compatible Codex skill runtime, Frontend codebase or web UI artifact
- 需要一个待设计或改进的前端界面。
- 在目标受众、约束和风格方向明确时效果最佳。
SkillDex 链接到 Skill 来源，不复制其全文。
证据摘要
implementedVerified 2026-07-02
Source directoryrepo
Public source directory and license metadata are represented as reference-only catalog evidence.
相关项目
相关项目由项目记录中的 relatedSkillSlugs 派生，仅用于导航和作品集上下文。它们不替代 evidence artifacts，也不证明项目已交付或该 Skill 被用于项目。
- 项目证据状态: planned项目记录更新: 2026-07-02InsightCanvas Agent
Portfolio project record for a planned analysis canvas agent. Public repository and demo evidence are not yet verified.
打开项目记录
安全示例提示词
打磨组件
使用 Frontend Design skill 改善该组件的布局、排版和交互状态，不要添加组件库。
安装 / 使用
参考上游 Claude Code 来源，并按需适配到 Claude Code 或 Codex 使用。
- 1打开该 Skill 的 GitHub 源目录。
- 2先查看上游 Claude Code 使用说明，再按需要手动应用到 Claude Code 或 Codex。
来源元数据
- Author
- anthropics
- Repository
- https://github.com/anthropics/skills
- License
- Apache-2.0
- Indexed
- 2026-05-21
- Reviewed
- 2026-05-21