UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
前端工程师 Skill，执行前端开发任务，自动适配项目技术栈（React/Vue/Svelte/Next.js 等），支持 Figma/Stitch 设计稿还原
Install Cm Frontend Engineer
$ npx skills add kingxiaozhe/cm-workflow --skill cm-frontend-engineer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install kingxiaozhe/cm-workflow cm-frontend-engineer --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/kingxiaozhe/cm-workflow.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/cm-frontend-engineer .claude/skills/cm-frontend-engineer && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "cm-frontend-engineer" agent skill from https://github.com/kingxiaozhe/cm-workflow/tree/main/skills/cm-frontend-engineer into .claude/skills/cm-frontend-engineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cm-frontend-engineer", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/kingxiaozhe/cm-workflow/tree/main/skills/cm-frontend-engineerType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add kingxiaozhe/cm-workflow --skill cm-frontend-engineer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install kingxiaozhe/cm-workflow cm-frontend-engineer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kingxiaozhe/cm-workflow.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/cm-frontend-engineer .agents/skills/cm-frontend-engineer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "cm-frontend-engineer" agent skill from https://github.com/kingxiaozhe/cm-workflow/tree/main/skills/cm-frontend-engineer into .agents/skills/cm-frontend-engineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cm-frontend-engineer", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kingxiaozhe/cm-workflow --skill cm-frontend-engineer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install kingxiaozhe/cm-workflow cm-frontend-engineer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kingxiaozhe/cm-workflow.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/cm-frontend-engineer .cursor/skills/cm-frontend-engineer && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "cm-frontend-engineer" agent skill from https://github.com/kingxiaozhe/cm-workflow/tree/main/skills/cm-frontend-engineer into .cursor/skills/cm-frontend-engineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cm-frontend-engineer", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/kingxiaozhe/cm-workflow.git --path skills/cm-frontend-engineer--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add kingxiaozhe/cm-workflow --skill cm-frontend-engineer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install kingxiaozhe/cm-workflow cm-frontend-engineer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kingxiaozhe/cm-workflow.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/cm-frontend-engineer .gemini/skills/cm-frontend-engineer && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "cm-frontend-engineer" agent skill from https://github.com/kingxiaozhe/cm-workflow/tree/main/skills/cm-frontend-engineer into .gemini/skills/cm-frontend-engineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cm-frontend-engineer", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install kingxiaozhe/cm-workflow cm-frontend-engineerInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add kingxiaozhe/cm-workflow --skill cm-frontend-engineer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/kingxiaozhe/cm-workflow.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/cm-frontend-engineer .github/skills/cm-frontend-engineer && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "cm-frontend-engineer" agent skill from https://github.com/kingxiaozhe/cm-workflow/tree/main/skills/cm-frontend-engineer into .github/skills/cm-frontend-engineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cm-frontend-engineer", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add kingxiaozhe/cm-workflow --skill cm-frontend-engineer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install kingxiaozhe/cm-workflow cm-frontend-engineer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/kingxiaozhe/cm-workflow.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/cm-frontend-engineer .opencode/skills/cm-frontend-engineer && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "cm-frontend-engineer" agent skill from https://github.com/kingxiaozhe/cm-workflow/tree/main/skills/cm-frontend-engineer into .opencode/skills/cm-frontend-engineer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "cm-frontend-engineer", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
cm-frontend-engineer- GitHub stars
- 104
- Token cost
- ~829 tokens
- SKILL.md length
- 243 words
- Files
- 1
- Skills in repo
- 23
- Repo updated
- First seen
- Licence
- MIT
At a glance
前端工程师 Skill，执行前端开发任务，自动适配项目技术栈（React/Vue/Svelte/Next.js 等），支持 Figma/Stitch 设计稿还原
- Works in 5 steps: 设计稿检查 → 识别技术栈 → 读取上下文 → …
- Frontend & Design work in your project
- SKILL.md covers 触发条件, 工作流程, 常见坑 and 输出
- Calls npm and npx
What it does
Cm Frontend Engineer is an agent skill from kingxiaozhe/cm-workflow. 前端工程师 Skill，执行前端开发任务，自动适配项目技术栈（React/Vue/Svelte/Next.js 等），支持 Figma/Stitch 设计稿还原
Its SKILL.md is about 830 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design. It works with Figma, React, Svelte and Vue.js. The repository describes itself as: Codex-native, spec-driven AI Agent workflow with Claude Code compatibility, independent review, QA, fixes, and refactors. The licence is MIT.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/cm-frontend-engineer”
Requirements
- Node.js
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 82d43f0. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npmnpx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm and npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Cm Frontend Engineer loads about 829 tokens when it runs. Until then it costs about 25 tokens; SKILL.md has 243 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from kingxiaozhe/cm-workflow at commit 82d43f0, republished under its MIT licence (© kingxiaozhe). 243 words, ~829 tokens.
Download SKILL.mdSave it as
.claude/skills/cm-frontend-engineer/SKILL.md (or your agent's skills folder).- name
- cm-frontend-engineer
- description
- 前端工程师 Skill，执行前端开发任务，自动适配项目技术栈（React/Vue/Svelte/Next.js 等），支持 Figma/Stitch 设计稿还原
cm-frontend-engineer — 前端工程师
执行前端开发任务。自动识别项目技术栈，遵循项目 .claude/rules/ 中的规范。
触发条件
由 /cm-ai 自动调用，当 task 涉及前端开发时触发。
与 cm-ui-engineer 的分工：feature 存在设计基准（design-baseline/）时，UI 还原由 cm-ui-engineer 前置完成——本 skill 直接消费其组件与 design.md 组件契约，不重写其样式；无基准时按下方 Step 0 现有行为处理。
工作流程
0. 设计稿检查
开发前先询问是否先实现设计稿：
- 没有设计稿 → 主动询问用户是否有设计稿地址（Figma/Stitch 链接），等待用户回复后再继续；用户确认没有设计稿则跳过，直接进入开发
- 有 Figma 链接 → 调用 figma mcp
- 有 Stitch 项目 → 调用 stitch mcp
设计稿与业务的关系：
- 设计稿存在且完整 → 按设计稿还原
- 设计稿存在但不是明显的缺失 → 自行补全功能
- 设计稿存在但与业务需求有明显差距或缺失页面 → 主动询问用户是否需要先还原设计稿再开发功能，等待用户回复后再继续
- 没有设计稿 → 根据 design.md 和业务需求自行实现
1. 识别技术栈
读取项目配置自动判断，不做硬编码假设：
package.json→ 框架（React/Vue/Svelte/Next/Nuxt/Astro...）、UI 库、状态管理tsconfig.json/jsconfig.json→ TS/JS、路径别名- 样式方案 → Tailwind / CSS Modules / styled-components / UnoCSS 等
- 构建工具 → Vite / Webpack / Turbopack / esbuild
2. 读取上下文
.claude/rules/frontend.md、.claude/rules/coding-style.md（如存在）- design.md 中当前任务相关的模块设计
- 扫描
src/了解现有组件结构和命名规律 - 重点扫描项目已有的 UI 组件库（
components/ui/、components/common/等），了解哪些组件已封装可复用
3. 开发
组件封装与复用（重要）：
- 开发前先检查项目已有的 UI 组件库，能复用的绝不重写
- 新建通用 UI 组件时放入项目约定的公共组件目录，确保可被其他页面复用
- 业务组件和 UI 组件分层：UI 组件不含业务逻辑，业务组件组合 UI 组件
- 如果项目使用了第三方组件库（Ant Design/shadcn/Element/Radix 等），优先用库内组件，不自己造轮子
Tailwind CSS（如项目使用）：
- 检查 Tailwind 版本（v3 vs v4），全局样式封装方式不同：
- v3：
@layer base/components/utilities+@apply在globals.css中 - v4：CSS-first 配置，
@theme定义 design token，@variant自定义变体
- v3：
- 复用样式通过组件封装而非到处复制 class 字符串
- 主题色、间距、字体等通过 Tailwind config / CSS 变量统一管理，不硬编码具体值
组件开发：
- 遵循项目已有的组件模式（class/函数、选项式/组合式）
- Props/类型定义跟随项目约定
- 文件命名跟随项目已有规律
状态管理：
- 识别项目使用的方案（Redux/Zustand/Pinia/Vuex/Jotai...）
- 简单局部状态用框架原生方案
- 参考 design.md 中的状态流转设计
API 调用：
- 基于 design.md 中的接口契约
- 后端未就绪 → 先写 mock，标注
// TODO: replace mock when API ready - 错误处理和 loading 状态
路由：
- 按 design.md 页面设计配置，遵循项目路由约定（file-based / config-based）
4. 验证
# 根据项目实际命令执行
npm run lint
npm run typecheck
npm run build如有开发服务器，启动验证页面渲染正常。
像素级还原验证（如有设计稿）：
还原度不靠"看着像"，用 BackstopJS 做量化对比：
- 设计稿导出为参考图（或导出 HTML+CSS 作为基准页面）
npx backstop test对比还原页面与基准，生成差异报告- 差异集中在特殊效果（渐变边框、复杂阴影）时评估修复成本，其余差异修复后复测
- 差异报告结果写入任务汇报，供 N6 QA 的可视化回归复用
注意：不要让 MCP 直接"照着感觉"还原——先拿到设计稿源文件/导出物作为基准，再开发，再对比。
常见坑
| 问题 | 处理 |
|---|---|
| 路径别名导致 import 报错 | 检查 tsconfig paths 和构建工具配置是否一致 |
| SSR/SSG 组件使用了 browser API | 加 typeof window !== 'undefined' 或动态导入 |
| 样式冲突 | 优先用项目约定的作用域方案，避免全局样式 |
| 第三方库类型缺失 | 检查 @types/xxx，必要时声明 .d.ts |
| Tailwind v3 和 v4 混用 | 检查版本，v4 不再用 tailwind.config.js，改用 CSS-first |
| 组件重复造轮子 | 开发前先搜索项目已有组件，grep 关键词 |
| 设计稿颜色/间距与 Tailwind token 不一致 | 扩展 theme 配置而非硬编码 hex 值 |
输出
- 创建/修改的文件列表
- 验证结果（lint + build）
- 设计稿还原情况（如有设计稿）
- 需要其他工种配合的事项
© kingxiaozhe, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/cm-frontend-engineer of kingxiaozhe/cm-workflow.
Open the folder on GitHubat commit 82d43f0
Compare with similar skills
Cm Frontend Engineer next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Cm Frontend Engineer this skillkingxiaozhe/cm-workflow | 104 | — | ~829 | Automated safety check: Pass | MIT | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| UI UX Pro Maxsundial-org/awesome-openclaw-skills | 663 | 2 repos | ~657 | Automated safety check: Pass | None | |
| Figma Codegenawdr74100/figwright | 995 | — | ~4.2k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxshobcoder/shob | 576 | — | ~3.7k | Automated safety check: Pass | MIT |
Similar skills
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
UI UX Pro Max
sundial-org/awesome-openclaw-skills
UI/UX design intelligence and implementation guidance for building polished interfaces.
Figma Codegen
awdr74100/figwright
Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.
UI UX Pro Max
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
Kb Framework Accessibility
Community-Access/accessibility-agents
Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.
More from kingxiaozhe/cm-workflow
All 23 skills in this repoCm AI
kingxiaozhe/cm-workflow
用户明确说“规格已确认，开始实现”或要求按已审批 CM specs 开发时使用。新任务默认由 JS workflow 驱动 N1-N8，完成开发、独立审查、QA 与文档同步；模糊点子、未审规格和单独一句“继续”不能触发编码批准。
Cm Check
kingxiaozhe/cm-workflow
用户说“检查工作流是否安装正确”“为什么找不到 cm 命令”时使用。默认查询 npm 稳定版，有新版自动升级已管理的 CM 安装，再检查插件、核心 Skills、兼容包装与模板引用；不测试或修改业务代码。
Cm Fix
kingxiaozhe/cm-workflow
用户说“修复这个可复现 bug”或要求根据失败报告修代码时使用。执行红灯测试、根因定位、最小修复、独立审查和回归；尚未确认的问题先用 cm-test，新功能和架构重设计转交 cm-prd。
Cm Idea
kingxiaozhe/cm-workflow
用户说“我有个点子”“帮我梳理产品”或需要先聊清目标时使用。通过逐题访谈整理为可交给 cm-prd 的 PRD；已有明确需求文档时改用 cm-prd，不写代码、不拆开发任务。
Cm Init
kingxiaozhe/cm-workflow
用户说“第一次接管这个项目”“分析仓库并生成项目规则”时使用。分析已有代码并生成 Codex AGENTS.md 与 CM/Claude 兼容规则；仅适用于非空存量项目，不创建脚手架、不承接普通代码修改。
Cm Miniprogram Engineer
kingxiaozhe/cm-workflow
微信小程序开发工程师 Skill，执行小程序开发任务，自动适配项目技术栈（原生小程序/Taro/uni-app 等），支持 Figma/Stitch 设计稿还原与云开发
Related
Categories
Questions about Cm Frontend Engineer
What does Cm Frontend Engineer do?
前端工程师 Skill，执行前端开发任务，自动适配项目技术栈（React/Vue/Svelte/Next.js 等），支持 Figma/Stitch 设计稿还原. Cm Frontend Engineer is an agent skill from kingxiaozhe/cm-workflow.
When should I use Cm Frontend Engineer?
Cm Frontend Engineer fits situations like: frontend & Design work in your project.
How do I install Cm Frontend Engineer in Claude Code?
Run `npx skills add kingxiaozhe/cm-workflow --skill cm-frontend-engineer -a claude-code`. Or copy the skill folder (skills/cm-frontend-engineer in kingxiaozhe/cm-workflow) into .claude/skills/cm-frontend-engineer in your project. Claude Code loads it when a task matches its description.
How do I install Cm Frontend Engineer in Codex?
Run `npx skills add kingxiaozhe/cm-workflow --skill cm-frontend-engineer -a codex`. Or copy the skill folder (skills/cm-frontend-engineer in kingxiaozhe/cm-workflow) into .agents/skills/cm-frontend-engineer in your project. Codex loads it when a task matches its description.
Can I use Cm Frontend Engineer in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add kingxiaozhe/cm-workflow --skill cm-frontend-engineer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/cm-frontend-engineer, .gemini/skills/cm-frontend-engineer, .github/skills/cm-frontend-engineer and .opencode/skills/cm-frontend-engineer in your project.
What does Cm Frontend Engineer need to run?
Going by SKILL.md and its folder, Cm Frontend Engineer needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.
Does Cm Frontend Engineer access the network?
SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Cm Frontend Engineer safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Cm Frontend Engineer use?
Cm Frontend Engineer is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Cm Frontend Engineer use?
About 829 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Cm Frontend Engineer?
Skills that share tags, products or a category with Cm Frontend Engineer: UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), Design Style (Castor6/tactus, 376 stars), UI UX Pro Max (sundial-org/awesome-openclaw-skills, 663 stars) and Figma Codegen (awdr74100/figwright, 995 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Cm Frontend Engineer?
kingxiaozhe (a GitHub user) maintains it in kingxiaozhe/cm-workflow, which has 104 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on October 9, 2026.
Source: kingxiaozhe/cm-workflow on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.