mcpField
F
frontend-master

frontend-master

github.com/zemu2718Design & UI452 installsUpdated 12w ago
Repository

About frontend-master

frontend-master is a skill for developers designing and implementing frontend interfaces. It guides project reconnaissance, visual direction, implementation, and verification against the running result.

Key features

  1. 01Inspect the existing design system
  2. 02Define page goals and content hierarchy
  3. 03Explore design directions with search
  4. 04Reuse components and theme tokens
  5. 05Verify pages and interactions

Use cases

  1. 01Set a visual direction for a new page
  2. 02Build an interface within an existing design system
  3. 03Check responsive layouts and accessibility
  4. 04Verify pages and interactions before delivery

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/zemu2718/lyfes-coding-skills --skill frontend-master

After installing, type/frontend-masterin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

data/
app-interface.csv
charts.csv
colors.csv
icons.csv
landing.csv
motion.csv
products.csv
react-performance.csv
data/stacks/
angular.csv
astro.csv
avalonia.csv
flutter.csv
html-tailwind.csv
javafx.csv
jetpack-compose.csv
laravel.csv
nextjs.csv
nuxt-ui.csv
nuxtjs.csv
react-native.csv
react.csv
shadcn.csv
svelte.csv
swiftui.csv
threejs.csv
uno.csv
uwp.csv
vue.csv
winui.csv
wpf.csv

Details

From the project README

Frontend Master

以设计工程师的标准完成前端任务：先理解内容和约束，再形成明确的视觉方向，最后用真实运行结果验证。不要把数据库推荐、流行风格或固定页面结构当作答案。

Workflow

1. Recon：读取现状

开始设计前先检查：

  • 框架、CSS 方案、UI 库、图标库和现有组件
  • CSS variables、主题 token、字体、间距和响应式惯例
  • 已有设计系统，以及同类页面的布局与交互模式
  • 项目指令、验证命令和可访问性要求

已有系统优先。除非用户明确要求重塑品牌，不要为了“独特”推翻成熟规范。

2. Frame：定义问题

编码前明确：

  • Purpose：页面解决什么问题
  • Audience：谁使用或浏览
  • Content hierarchy：什么内容最重要
  • Primary action：希望用户完成什么
  • Tone：界面应传达什么气质
  • Signature element：最值得被记住的一个设计特征
  • Constraints：技术、内容、性能、无障碍和品牌限制

新建主页、个人品牌页、作品集或平台模板时，必须读取 template-design.md，先输出简短模板简报，再开始实现。

3. Research：把搜索结果当作候选

需要探索方向时使用内置搜索工具：

python3 scripts/search.py "<项目类型> <行业> <关键词>" --design-system -p "<项目名>"
python3 scripts/search.py "<关键词>" --domain style
python3 scripts/search.py "<动效需求>" --domain gsap
python3 scripts/search.py "<App 交互问题>" --domain app
python3 scripts/search.py "<字体需求>" --domain google-fonts
python3 scripts/search.py "<关键词>" --stack nextjs

搜索结果必须经过受众、品牌、语言、现有系统和实施成本过滤。不要机械采用第一条结果，也不要固定收敛到某个字体、渐变或 Hero > Features > CTA。

需要主动控制探索幅度时，可使用三个 1–10 的设计调节器：

python3 scripts/search.py "<项目描述>" --design-system \
  --variance 8 \
  --motion 6 \
  --density 7
  • variance：从克制对称到大胆非对称
  • motion：从细微反馈到复杂编排；仍须遵循 Reduced Motion
  • density：从宽松内容布局到高密度 Dashboard
4. Craft：实现并精修
  • 视觉决策遵循 design-philosophy.md。
  • 组件状态和反馈遵循 interaction-craft.md。
  • 涉及动画时读取 motion-quality.md。
  • 复用项目现有组件与主题 token；不硬编码平行的设计系统。
  • 保持语义化、mobile-first、WCAG AA，并匹配项目既有代码风格。

按场景调用专项 Skill，不要每次串行调用全部能力：

场景专项 Skill
深度检查组件状态、反馈和微观质感emil-design-eng
拖拽、swipe、sheet、spring、momentum、可中断交互apple-design
用户只描述效果，需要确认动效术语animation-vocabulary
页面显得静态，需要寻找真正值得增加的动效find-animation-opportunities
已有大量动效，需要系统审计和整改计划improve-animations

专项 Skill 不可用时，以本 Skill 的 references 为最低质量基线继续完成任务。

5. Persist：谨慎维护设计系统
  • 已有设计系统：优先读取并遵循，只有明确变更才更新。
  • 首次建立：先展示设计方向并获得确认，再执行持久化。
  • 默认不覆盖已有文件；用户明确更新时使用 --force。
python3 scripts/search.py "<项目描述>" \
  --design-system \
  --persist \
  -p "<项目名>" \
  --page "<页面名>"

生成结构：

design-system/<project-slug>/MASTER.md
design-system/<project-slug>/pages/<page-slug>.md

页面规则覆盖 MASTER；其余规则继承 MASTER。

6. Verify：用证据完成交付

交付前读取 verification.md：

  • 运行项目已有 lint、typecheck、test 和 build
  • 实际打开页面，检查真实内容与关键交互
  • 验证移动端、桌面端、键盘和 Reduced Motion
  • 检查控制台、资源加载、溢出、裁切和固定层遮挡

无法运行的项目必须明确说明未验证项。只看源码或只勾选清单，不等于完成视觉验证。

Quality Bar

  • 设计方向明确且服务内容，不靠装饰堆叠制造“高级感”
  • 模板之间有结构性差异，而不是只换颜色、圆角或阴影
  • 只有真实可交互元素呈现交互 affordance
  • 动效有目的、克制、可中断或可降级
  • 字体适配品牌、语言覆盖、性能和阅读场景
  • 桌面端与移动端分别组织信息，而不是等比例缩小
  • 所有完成声明均有最新验证证据

Comments

Markdown supported