🎨
page-design
专精 Vue 3 的前端设计 skill，反模板 + 可复用 design system
Claude Code SkillVue 3前端设计
开源的 Claude Code skill，专精 Vue 3 前端页面设计：把一个模糊需求，变成一套有记忆点、不落俗套、可复用的页面设计，覆盖设计 → 实现 → 审查 → 交付完整闭环。
解决什么问题
AI 生成的设计高度同质化——暖奶油底 + 衬线 + 赭石、近黑 + 酸绿、报纸式细线密排，三套「默认长相」反复出现。这个 skill 的核心是反模板：让每个页面有真正属于它主题的视觉身份，而不是套默认。
同时解决「设计做完就散」：把决策沉淀成可复用的 design system（master + overrides），跨页面一致、可移交、可回溯。
核心特性
- 🎯 反模板：signature + 五轴坐标 — 配色情绪 / 排版气质 / 布局密度 / 动效调性 / 材质感，把「风格」变成可定位、可查表的坐标；每页一个真实记忆点（signature），来自主题世界的材质 / 器物 / 数据，不是装饰
- 🧱 Design System 生命周期 — 一次设计产出 master token（配色 / 排版 / 布局 / 动效 / signature），后续页面只声明 overrides 差异，DRY、跨页面一致；经实战验证的 master 可入库供未来项目复用
- 🔄 四步交付 + handoff — discovery → design → implement → review，最终产出标准交付包（产物索引 + 决策 + 消费指引）
怎么用
在 Claude Code 里直接说需求，skill 自动加载：
- 「设计一个精品咖啡品牌的落地页」
- 「给这个 Dashboard 出视觉方案」
- 「审查这个页面的设计质量」
- 「拆解 onyxcoffeelab.com 的设计五轴」
安装：clone 仓库后软链到 ~/.claude/skills/page-design，或直接放进项目的 .claude/skills/page-design/。
架构
| 层 | 目录 | 职责 |
|---|---|---|
| 哲学层 | principles/ | 怎么「想」设计（反模板 / signature / 视觉语法 / 克制） |
| 规则层 | rules/ | 原子化决策规则（a11y / layout / motion / performance） |
| 数据层 | data/ | token 物料 + schema + 成品库 |
| 工作流层 | workflow/ | discovery → design → implement → review 节奏 |
| 组件化 | components/ | Vue 组件约定与示例 |
融合 Anthropic frontend-design、ui-ux-pro-max、Vercel 系列设计 skill 之长。多技术栈速查（React / Svelte / 原生等）用 ui-ux-pro-max，Vue 完整设计交付用本 skill。
MIT License — 详见 LICENSE。