Uncodixfy
pdsuwwz/chatgpt-vue3-light-mvp
Prevents generic AI/Codex UI patterns when generating frontend code.
创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。
Install Frontend Design
$ npx skills add xstongxue/best-skills --skill frontend-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install xstongxue/best-skills frontend-design --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/xstongxue/best-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/frontend-design .claude/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/frontend-design into .claude/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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/xstongxue/best-skills/tree/main/skills/frontend-designType 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 xstongxue/best-skills --skill frontend-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install xstongxue/best-skills frontend-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/frontend-design .agents/skills/frontend-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-design" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/frontend-design into .agents/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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 xstongxue/best-skills --skill frontend-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install xstongxue/best-skills frontend-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/frontend-design .cursor/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/frontend-design into .cursor/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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/xstongxue/best-skills.git --path skills/frontend-design--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 xstongxue/best-skills --skill frontend-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install xstongxue/best-skills frontend-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/frontend-design .gemini/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/frontend-design into .gemini/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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 xstongxue/best-skills frontend-designInstalls 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 xstongxue/best-skills --skill frontend-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/frontend-design .github/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/frontend-design into .github/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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 xstongxue/best-skills --skill frontend-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install xstongxue/best-skills frontend-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/xstongxue/best-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/frontend-design .opencode/skills/frontend-design && 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 "frontend-design" agent skill from https://github.com/xstongxue/best-skills/tree/main/skills/frontend-design into .opencode/skills/frontend-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-design", 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
frontend-design- GitHub stars
- 3k
- Token cost
- ~599 tokens
- SKILL.md length
- 92 words
- Files
- 1
- Skills in repo
- 15
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。
- Tasks that involve Frontend development
- SKILL.md covers 设计思维, 前端美学指南, 禁忌：避免「AI 通用审美」 and 实现复杂度与美学一致, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Frontend Design is an agent skill from xstongxue/best-skills. 创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。
Its SKILL.md is about 600 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, covering Frontend development. It works with React and Vue.js. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Frontend development
Example prompts
- “/frontend-design”
What it can do on your machine
Read from SKILL.md and the folder at commit 9aa4e55. 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
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Frontend Design loads about 599 tokens when it runs. Until then it costs about 39 tokens; SKILL.md has 92 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 xstongxue/best-skills at commit 9aa4e55, republished under its Apache-2.0 licence (© xstongxue). 92 words, ~599 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-design/SKILL.md (or your agent's skills folder).- name
- frontend-design
- description
- 创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。
- license
- Complete terms in LICENSE.txt
本技能指导创建独具一格、可交付生产的前端界面，规避千篇一律的「AI 感」审美。在实现可运行代码的同时，对美学细节与创意选择给予充分关注。
用户会提供前端需求：要做的组件、页面、应用或界面，可能附带使用场景、目标用户或技术约束。
设计思维
动手写代码前，先理解上下文并选定一个明确、大胆的美学方向：
- 目的：这个界面解决什么问题？谁在用？
- 调性：选一个鲜明风格并贯彻到底，例如：极简克制、繁复张扬、复古未来、有机/自然、奢华精致、 playful/玩具感、编辑/杂志风、粗野/原始、装饰艺术/几何、柔和/马卡龙、工业/实用主义等。用这些作灵感，但最终要忠于你选定的那一套美学。
- 约束：技术条件（框架、性能、可访问性等）。
- 差异化：什么会让用户过目不忘？你最希望被记住的那一点是什么？
关键：选定清晰的概念方向并精准执行。大胆的繁复与克制的极简都成立——核心是有意图，而不是单纯「够猛」或「够淡」。
在此基础上，用可运行代码（HTML/CSS/JS、Vue、React等）实现：
- 达到生产可用、功能完整
- 视觉上有冲击力、易被记住
- 整体统一、有明确的美学立场
- 细节经得起推敲
前端美学指南
重点把握以下维度：
字体与排版
- 选用有辨识度、耐看、有趣的字体，避免 Arial、Inter、思源黑体等「默认感」过强的选择。
- 用有性格的字体提升整体气质；可尝试非常规、带个性的字体组合。
- 标题用一款有表现力的展示字体，正文用一款清晰易读的字体，形成层次。
- 建立清晰的字号与字重层级（标题 / 小标题 / 正文 / 辅助说明），配合行高、字间距与留白。
色彩与主题
- 围绕一套统一的色彩体系，用 CSS 变量管理，便于维护与主题切换。
- 主色明确 + 少量高对比强调色，比「平均分配」的配色更有力。
- 兼顾无障碍：重要文字与背景对比度建议 ≥ 4.5:1（WCAG AA）；不要仅靠颜色传达信息，需配合形状、图标或文字。
动效与微交互
- 用动画营造反馈与氛围。纯 HTML/CSS 场景优先用 CSS 实现；React 项目可配合 Motion 等库。
- 集中做好少数高光时刻：例如一次精心编排的页面进入（错落出现、animation-delay）比零散的微动效更打动人。
- 适度使用滚动触发、悬停状态，让交互有惊喜感。
- 尊重用户偏好：通过
prefers-reduced-motion媒体查询为「减少动效」用户提供静态或简化动效，不强制观看动画。
空间与版式
- 非常规布局：不对称、重叠、斜线走向、打破网格的元素。
- 留白（负空间）：要么给足留白、营造呼吸感，要么刻意做高密度信息排布，二者都要有明确意图。
- 留白能引导视线、建立层次、减轻视觉疲劳；重要元素周围留白越多，注意力越集中。可尝试「比你以为需要的再多留 30% 空间」以提升品质感。
背景与视觉细节
- 用层次与氛围替代纯色块：渐变网格、噪点纹理、几何图案、半透明叠加、强烈阴影、装饰边框、颗粒叠加等，与整体风格一致。
- 根据场景选择：定制光标、细线、底纹等，增强情境感。
禁忌：避免「AI 通用审美」
不要使用以下套路：
- 泛滥的字体：Inter、Roboto、Arial、系统默认字体堆砌。
- 陈词滥调的配色：尤其是白底 + 紫色/蓝色渐变。
- 机械的、模板化的布局与组件样式，缺乏与业务/场景相关的个性。
要在理解需求的基础上做有创意的解读，做出让人感觉「是为这个场景专门设计」的选择。每次设计都应有差异：明/暗主题、字体、风格都可以变化，不要反复收敛到同一套常见组合（例如 Space Grotesk 等）。
实现复杂度与美学一致
重要：实现量要和美学目标匹配。
- 繁复/张扬的风格：需要更完整的动效、层次和细节代码。
- 极简/克制的风格：需要克制的代码、精确的间距、字体与细微对比，少即是多。
优雅来自把选定的方向执行到位，而不是堆砌效果。
可访问性（WCAG 导向）
- 可感知：内容可被不同用户感知（色彩+形状/文字/图标等多通道）。
- 可操作：支持键盘、触控与指针，焦点顺序合理，使用
:focus/:focus-visible等。 - 可理解：结构清晰，语义化 HTML（标题、链接、表单等），必要时用 ARIA 增强。
- 健壮：兼容主流浏览器与辅助技术；文本可放大（如 200%～400%）仍可用。
动效部分务必考虑 prefers-reduced-motion，避免强制动画。
总结
在明确目的与调性的前提下，用大胆、一致、有记忆点的视觉与交互实现生产级前端。留白、层次、动效与可访问性共同支撑「既好看又好用」的界面。敢于做非常规选择，把一次设计做到让人过目不忘。
© xstongxue, Apache-2.0. 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/frontend-design of xstongxue/best-skills.
Open the folder on GitHubat commit 9aa4e55
Compare with similar skills
Frontend Design 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 |
|---|---|---|---|---|---|---|
| Frontend Design this skillxstongxue/best-skills | 3k | — | ~599 | Automated safety check: Pass | Apache-2.0 | |
| Uncodixfypdsuwwz/chatgpt-vue3-light-mvp | 579 | 2 repos | ~3k | Automated safety check: Pass | MIT | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Bryl Minimal Designbryllim/bryl-minimal-design | 115 | — | ~2.9k | Automated safety check: Pass | MIT | |
| Frontend Designjjyaoao/HelloAgents | 3.2k | 1 repos | ~7k | Automated safety check: Pass | MIT | |
| Frontend UI Foundryjiushiwon/wg-skills | 114 | — | ~1.4k | Automated safety check: Pass | Apache-2.0 |
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.
Bryl Minimal Design
bryllim/bryl-minimal-design
Apply the bryl-minimal design language — a monochrome, typography-driven minimal aesthetic with halftone dot textures, pixel-font display headings, tiny uppercase monospace labels, soft large-radius…
Frontend Design
jjyaoao/HelloAgents
Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution.
Frontend UI Foundry
jiushiwon/wg-skills
A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…
UI Craft
MemTensor/memmy-agent
Design, build, redesign, or modify browser-visible web interfaces with product-quality composition, visual systems, interaction states, responsive behavior, accessibility, and browser visual QA.
More from xstongxue/best-skills
All 15 skills in this repoCreate Skill
xstongxue/best-skills
Guides users through creating effective Agent Skills for Cursor.
Office File Process
xstongxue/best-skills
处理 Office 文档的一站式 skill：Word(.doc/.docx/.dotx)、Excel(.xls/.xlsx/.xlsm/.csv)、PowerPoint(.ppt/.pptx/.potx) 的创建、读取、编辑、提取、转换、校验。触发：『读取 word 文档』『提取 excel 内容』『看 ppt 讲了什么』、.doc 老格式打不开、生成/编辑 Word…
Pptgen Drawio
xstongxue/best-skills
根据论文或汇报内容生成多页 Draw.io 格式 PPT，支持论文答辩与通用汇报两种模式，自动导出为 .pptx。当用户提到论文答辩 PPT、答辩幻灯片、通用 PPT、汇报 PPT、根据模板生成 PPT、drawio2pptx 时使用。
Wechat Article Writer
xstongxue/best-skills
公众号/自媒体全流程。根据用户表述自动匹配：撰写文章、封面图、正文插图、风格提取。支持多种写作风格。当用户提到写公众号、技术博客、公众号封面、正文插图、步骤图、演示图、流程示意、分析写作风格、克隆文风、模仿爆款、提取风格时使用。详见 reference 目录。
Drawio Diagram
xstongxue/best-skills
为深度学习模型、网络架构、算法流程等生成标准 Draw.io (.drawio) 格式的可视化图表；支持从零生成与风格迁移两种模式。从零生成：模型架构图、流程图、感受野示意图等；风格迁移：参考图 + 内容描述/项目 → 按参考图风格生成新图。确保 XML 格式正确，可直接在 Draw.io 中打开编辑。
Project Docs
xstongxue/best-skills
对任意代码项目生成一套面向新人的循序渐进文档集，输出到 docs/ 目录。含架构、设计思想、语言特性、代码导读、运行时模型、构建、对接、调试、设计规范共 9 篇，支持全部生成 / 只写几篇 / 更新已有文档。当用户提到"生成项目文档"、"新人文档"、"上手文档"、"架构文档"、"代码导读"、"项目理解"、"深入理解项目"、"onboarding…
Related
Categories
Questions about Frontend Design
What does Frontend Design do?
创建具有高设计品质、可交付生产的前端界面。当用户要求构建 Web 组件、页面、海报或应用（如官网、落地页、仪表盘、React/Vue 组件、HTML/CSS 布局，或对任意 Web UI 进行样式/美化）时使用本技能。产出有创意、打磨到位且避免「AI 通用审美」的代码与界面设计。. Frontend Design is an agent skill from xstongxue/best-skills.
When should I use Frontend Design?
Frontend Design fits situations like: tasks that involve Frontend development.
How do I install Frontend Design in Claude Code?
Run `npx skills add xstongxue/best-skills --skill frontend-design -a claude-code`. Or copy the skill folder (skills/frontend-design in xstongxue/best-skills) into .claude/skills/frontend-design in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Design in Codex?
Run `npx skills add xstongxue/best-skills --skill frontend-design -a codex`. Or copy the skill folder (skills/frontend-design in xstongxue/best-skills) into .agents/skills/frontend-design in your project. Codex loads it when a task matches its description.
Can I use Frontend Design 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 xstongxue/best-skills --skill frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-design, .gemini/skills/frontend-design, .github/skills/frontend-design and .opencode/skills/frontend-design in your project.
What does Frontend Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Frontend Design is instructions for the agent only.
Does Frontend Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frontend Design 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 Frontend Design use?
Frontend Design is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend Design use?
About 599 tokens (SKILL.md is roughly 2.4k 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 Frontend Design?
Skills that share tags, products or a category with Frontend Design: Uncodixfy (pdsuwwz/chatgpt-vue3-light-mvp, 579 stars), Design Style (Castor6/tactus, 376 stars), Bryl Minimal Design (bryllim/bryl-minimal-design, 115 stars) and Frontend Design (jjyaoao/HelloAgents, 3.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Design?
xstongxue (a GitHub user) maintains it in xstongxue/best-skills, which has 2,966 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on September 13, 2026.
Source: xstongxue/best-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.