davila7/frontend-design Skill 技能

技能简介

davila7/frontend-design 是 Skillstore 上线、面向 Claude / Codex / Claude Code 的「高完成度前端界面设计」Skill。它把零散的产品需求转译成具备明确视觉语言、有交互细节、可直接运行的前端实现，专注于解决"通用 AI 生成的前端界面千篇一律、缺乏品牌识别度、看起来半成品"的痛点。Skill 出自 davila7/claude-code-templates 仓库（MIT 协议、r2 版本），属于 Skillstore creative-design 系列在生产可用度上最受欢迎的资源之一。

核心能力

• 多栈交付：可同时基于 HTML/CSS/JavaScript、React、Vue 给出可运行代码，按栈选最贴合的实现路径。
• 视觉方向选择：基于受众、使用场景与工程约束，挑选克制 / 现代 / 编辑式 / 行业主题等清晰视觉方向。
• 排版与色彩系统：定义统一的字体层级、配色、间距尺度、构图节奏与背景处理，使页面具备整体感。
• 动效与微交互：在悬停态、页面切换、加载过程加入有目的的动画，避免炫技式动效。
• 抗通用化：内置"反默认 Bootstrap 风"检查清单，避免输出与全网雷同的蓝紫渐变 + 圆角模板。
• 生产可用：输出可直接接入构建工具链的代码片段与文件结构，避免伪代码或占位图。

安装配置

1. 通过 npx 安装 Skill：npx skillstore add davila7/frontend-design。
2. 确认 Claude / Codex / Claude Code 已启用 Skill 加载机制；如使用 Claude Code，需保证 ~/.claude/skills/ 目录可读写。
3. 在 Agent 的工作目录下调用 Skill，让 Agent 读取本目录中的 SKILL.md / 元数据，作为后续 prompt 的运行时约束。
4. 如需离线复用，可 fork 仓库 davila7/claude-code-templates 后挂载到自有 Skill 注册中心。

使用步骤

1. 在 Agent 对话中给出产品的目标用户、核心场景、品牌关键词与必须的页面清单。
2. 描述需要落地的页面或组件（如 Landing / Dashboard / 表单详情 / 模态弹窗），并附上文案草稿或 Figma 链接。
3. 让 Skill 按"视觉方向 → 排版色彩 → 组件 → 动效"四段流程给出实现；要求每段都给出可独立审查的小结。
4. 对生成的代码要求落 HTML/CSS 真实样式，避免停留在 token 描述；如需 React/Vue，注明目标框架与版本。
5. 在 PR 评审阶段用 Skill 检查"是否仍像默认 Bootstrap 模板"，过不了就回退到第 3 步继续打磨。

适用场景

• 初创团队 MVP 第一版官网页面，需要快速建立具备识别度的视觉语言。
• 内部 SaaS 后台，需要把 antd / shadcn 模板化的界面升级成有产品调性的视觉。
• 独立开发者的作品集与个人主页，希望在不雇设计师的前提下显得"完成度更高"。
• 中大型公司在 AI Coding 工作流中为前端 PR 增加"反通用化"质量门禁。
• 营销活动落地页，需要在一周内同时跑出 3~5 个差异化方向。

适用人群

• 全栈 / 前端工程师在 AI 协作下要交付"看起来不像 AI 写"的页面时。
• 产品经理 / 设计师需要快速把想法转成可视稿，与工程对齐。
• AI Agent 工程师在做 Coding Agent 的前端场景时，把它作为前端方向的 system prompt 模板。

工作原理

Skill 在加载时把元数据 + 编码契约写入 Agent 的提示上下文：当用户发出前端实现请求时，Agent 先按 Skill 内置清单选择视觉方向与排版尺度，再产出代码，并在每一步附上"为什么这么设计"的注释；最终交付前还要经过"差异化反模板"自检，避免滑回通用 SaaS 蓝紫渐变。

官方链接

• Skill 详情页：https://skillstore.io/skills/davila7-frontend-design
• 仓库：https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/frontend-design
• Manifest：https://skillstore.io/api/skills/davila7-frontend-design/manifest