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.
A skill your agent uses when Codex must act as a senior UI web interface designer to observe an existing system page, inspect the current product style and available page functions, then redesign or…
Install Modern Web UI Designer
$ npx skills add LAIJiangFeng/resume-builder --skill modern-web-ui-designer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install LAIJiangFeng/resume-builder modern-web-ui-designer --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/LAIJiangFeng/resume-builder.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/modern-web-ui-designer .claude/skills/modern-web-ui-designer && 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 "modern-web-ui-designer" agent skill from https://github.com/LAIJiangFeng/resume-builder/tree/main/.codex/skills/modern-web-ui-designer into .claude/skills/modern-web-ui-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-ui-designer", 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/LAIJiangFeng/resume-builder/tree/main/.codex/skills/modern-web-ui-designerType 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 LAIJiangFeng/resume-builder --skill modern-web-ui-designer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install LAIJiangFeng/resume-builder modern-web-ui-designer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LAIJiangFeng/resume-builder.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.codex/skills/modern-web-ui-designer .agents/skills/modern-web-ui-designer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "modern-web-ui-designer" agent skill from https://github.com/LAIJiangFeng/resume-builder/tree/main/.codex/skills/modern-web-ui-designer into .agents/skills/modern-web-ui-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-ui-designer", 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 LAIJiangFeng/resume-builder --skill modern-web-ui-designer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install LAIJiangFeng/resume-builder modern-web-ui-designer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LAIJiangFeng/resume-builder.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.codex/skills/modern-web-ui-designer .cursor/skills/modern-web-ui-designer && 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 "modern-web-ui-designer" agent skill from https://github.com/LAIJiangFeng/resume-builder/tree/main/.codex/skills/modern-web-ui-designer into .cursor/skills/modern-web-ui-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-ui-designer", 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/LAIJiangFeng/resume-builder.git --path .codex/skills/modern-web-ui-designer--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 LAIJiangFeng/resume-builder --skill modern-web-ui-designer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install LAIJiangFeng/resume-builder modern-web-ui-designer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LAIJiangFeng/resume-builder.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.codex/skills/modern-web-ui-designer .gemini/skills/modern-web-ui-designer && 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 "modern-web-ui-designer" agent skill from https://github.com/LAIJiangFeng/resume-builder/tree/main/.codex/skills/modern-web-ui-designer into .gemini/skills/modern-web-ui-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-ui-designer", 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 LAIJiangFeng/resume-builder modern-web-ui-designerInstalls 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 LAIJiangFeng/resume-builder --skill modern-web-ui-designer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/LAIJiangFeng/resume-builder.git skills-src && mkdir -p .github/skills && cp -r skills-src/.codex/skills/modern-web-ui-designer .github/skills/modern-web-ui-designer && 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 "modern-web-ui-designer" agent skill from https://github.com/LAIJiangFeng/resume-builder/tree/main/.codex/skills/modern-web-ui-designer into .github/skills/modern-web-ui-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-ui-designer", 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 LAIJiangFeng/resume-builder --skill modern-web-ui-designer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install LAIJiangFeng/resume-builder modern-web-ui-designer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/LAIJiangFeng/resume-builder.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.codex/skills/modern-web-ui-designer .opencode/skills/modern-web-ui-designer && 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 "modern-web-ui-designer" agent skill from https://github.com/LAIJiangFeng/resume-builder/tree/main/.codex/skills/modern-web-ui-designer into .opencode/skills/modern-web-ui-designer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "modern-web-ui-designer", 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
modern-web-ui-designer- GitHub stars
- 248
- Token cost
- ~763 tokens
- SKILL.md length
- 122 words
- Files
- 2
- Skills in repo
- 8
- Repo updated
- First seen
- Licence
- None found
At a glance
A skill your agent uses when Codex must act as a senior UI web interface designer to observe an existing system page, inspect the current product style and available page functions, then redesign or…
- Works in 6 steps: 明确用户指定的目标界面，把用户话里的 xxx… → 观察当前系统的目标界面风格，记录布局、色彩、字体、按钮、表单、列表、卡片、图表、导… → 梳理目标界面已有系统功能，只保留现有功能、已有入口和必要业务流程，不额外发明业务能… → …
- Codex must act as a senior UI web interface designer to observe an existing system page
- SKILL.md covers 核心角色, 适用范围, 通用提示词 and 工作流程, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Modern Web UI Designer is an agent skill from LAIJiangFeng/resume-builder. Use when Codex must act as a senior UI web interface designer to observe an existing system page, inspect the current product style and available page functions, then redesign or adjust any explicitly named modern Chinese web UI interface in any implementation context. Trigger for requests about UI redesign, UI adjustment, page beautification, visual upgrade, modern web interface design, avoiding project UI skills, removing old style, reducing AI-looking design, avoiding extra UI titles or functional descriptive…
Its SKILL.md is about 760 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Frontend & Design, covering Frontend development.
When your agent uses it
- Codex must act as a senior UI web interface designer to observe an existing system page
- Inspect the current product style and available page functions
- Adjust any explicitly named modern Chinese web UI interface in any implementation context
- Requests about UI redesign
Example prompts
- “/modern-web-ui-designer”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- 明确用户指定的目标界面，把用户话里的 xxx 替换成真实页面名称、路由、截图、设计稿或当前系统页面。
- 观察当前系统的目标界面风格，记录布局、色彩、字体、按钮、表单、列表、卡片、图表、导航、背景、图标、密度、留白和交互状态。
- 梳理目标界面已有系统功能，只保留现有功能、已有入口和必要业务流程，不额外发明业务能力。
- 选择当前任务可用的实现方式完成 UI 调整，可以是直接改代码、生成设计说明、产出设计稿提示词、调用用户指定工具或给出组件结构。
- 每轮设计后进行批判性自检，主动检查旧风格、模板感、AI 味、视觉噪音、功能缺失、可用性风险、响应式问题和规范问题。
- 基于自检继续迭代，直到设计达到现代、专业、克制、有品牌感且符合中文 Web 产品体验。
What it can do on your machine
Read from SKILL.md and the folder at commit 1301cfc. 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
Modern Web UI Designer loads about 763 tokens when it runs. Until then it costs about 171 tokens; SKILL.md has 122 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
Without a licence we can't republish the file, so here is its outline and opening line. It has 122 words (~763 tokens).
“以 10 年经验的 UI Web 界面设计专家身份工作。专注观察、判断、设计和迭代，不输出无关说明。除非用户明确要求，否则不要调用任何项目内 UI 相关 Skill，包括 UI-Ux-Pro-Max、Frontend Design 或项目自定义 UI Skill。”
- name
- modern-web-ui-designer
Files
SKILL.md and 1 other file in .codex/skills/modern-web-ui-designer of LAIJiangFeng/resume-builder.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit 1301cfc
Compare with similar skills
Modern Web UI Designer 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 |
|---|---|---|---|---|---|---|
| Modern Web UI Designer this skillLAIJiangFeng/resume-builder | 248 | — | ~763 | Automated safety check: Pass | None | |
| Design StyleCastor6/tactus | 376 | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Senior FrontendOhh-889/skyroc | 795 | 2 repos | ~1.1k | Automated safety check: Notes | MIT | |
| Avoid AI Designsunkaifei/FlyCms | 656 | — | ~3.5k | Automated safety check: Pass | MIT | |
| Superdesignsuperdesigndev/superdesign-skill | 642 | — | ~4.1k | Automated safety check: Pass | MIT | |
| Userinterface Wikiraphaelsalaja/userinterface-wiki | 907 | — | ~3.5k | Automated safety check: Pass | MIT |
Similar skills
Senior Frontend
Ohh-889/skyroc
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
Avoid AI Design
sunkaifei/FlyCms
Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the…
Superdesign
superdesigndev/superdesign-skill
Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models.
Userinterface Wiki
raphaelsalaja/userinterface-wiki
UI/UX best practices for web interfaces. An agent skill from raphaelsalaja/userinterface-wiki.
UI Design Brain
carmahhawwari/ui-design-brain
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components.
More from LAIJiangFeng/resume-builder
All 8 skills in this repoCode Review
LAIJiangFeng/resume-builder
用于当前项目的 Claude 代码审查与评分。适用于“代码审查、PR/MR review、质量评分、风险评估”等任务，按 v2.0 规范输出 P0/P1/P2、总分、星级和合并结论，并且终端结果与落盘报告都必须使用中文，结果写入根目录 code-review 文件夹。
Code Review
LAIJiangFeng/resume-builder
用于当前项目的 Codex 代码审查与评分。适用于“代码审查、PR/MR review、质量评估、风险检查”等场景，要求按 v2.0 规范输出 P0/P1/P2、量化评分、星级和审查结论，并且终端结果与落盘报告都必须使用中文，结果写入根目录 code-review 文件夹。
Code Review Fix
LAIJiangFeng/resume-builder
读取当前项目 code-review 文件夹中按分支名生成的审查结果，修复 P0、P1 问题，并继续修复必要问题直到下一次 code-review 评分超过 80 分
PR Review Fix
LAIJiangFeng/resume-builder
读取当前项目的 PR 审查结果，自动修复中等和严重问题，轻微问题需确认后再决定是否修复. An agent skill from LAIJiangFeng/resume-builder.
Resume Backend Project Optimizer
LAIJiangFeng/resume-builder
将中文后端项目经历改写为高质量、可面试追问、强数据化的简历要点。适用于用户提供“项目经历/主要工作/职责描述”后，要求按统一模板输出“负责xxx功能 + 关键技术细节组合 + 解决问题 + 数据化结果”的场景；适用于 Java 后端求职、简历优化、面试前项目复盘，且需要对齐面试高频考点（Java 集合与并发、MySQL、Redis、Spring、消息队列、系统设计等）时使用。
Resume Template From Image
LAIJiangFeng/resume-builder
当用户发送简历模板图片时，按本项目现有模板规范直接生成可用的新模板（含组件、注册与预览图接入）. An agent skill from LAIJiangFeng/resume-builder.
Related
Categories
Questions about Modern Web UI Designer
What does Modern Web UI Designer do?
A skill your agent uses when Codex must act as a senior UI web interface designer to observe an existing system page, inspect the current product style and available page functions, then redesign or…. Modern Web UI Designer is an agent skill from LAIJiangFeng/resume-builder. Use when Codex must act as a senior UI web interface designer to observe an existing system page, inspect the current product style and available page functions, then redesign or adjust any explicitly named modern Chinese web UI interface in any implementation context.
When should I use Modern Web UI Designer?
Modern Web UI Designer fits situations like: Codex must act as a senior UI web interface designer to observe an existing system page; inspect the current product style and available page functions; adjust any explicitly named modern Chinese web UI interface in any implementation context; requests about UI redesign.
How do I install Modern Web UI Designer in Claude Code?
Run `npx skills add LAIJiangFeng/resume-builder --skill modern-web-ui-designer -a claude-code`. Or copy the skill folder (.codex/skills/modern-web-ui-designer in LAIJiangFeng/resume-builder) into .claude/skills/modern-web-ui-designer in your project. Claude Code loads it when a task matches its description.
How do I install Modern Web UI Designer in Codex?
Run `npx skills add LAIJiangFeng/resume-builder --skill modern-web-ui-designer -a codex`. Or copy the skill folder (.codex/skills/modern-web-ui-designer in LAIJiangFeng/resume-builder) into .agents/skills/modern-web-ui-designer in your project. Codex loads it when a task matches its description.
Can I use Modern Web UI Designer 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 LAIJiangFeng/resume-builder --skill modern-web-ui-designer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/modern-web-ui-designer, .gemini/skills/modern-web-ui-designer, .github/skills/modern-web-ui-designer and .opencode/skills/modern-web-ui-designer in your project.
What does Modern Web UI Designer need to run?
SKILL.md names no scripts, command-line tools or credentials: Modern Web UI Designer is instructions for the agent only.
Does Modern Web UI Designer 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 Modern Web UI Designer 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 Modern Web UI Designer use?
No licence was found for Modern Web UI Designer or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Modern Web UI Designer use?
About 763 tokens (SKILL.md is roughly 3.1k 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 Modern Web UI Designer?
Skills that share tags, products or a category with Modern Web UI Designer: Design Style (Castor6/tactus, 376 stars), Senior Frontend (Ohh-889/skyroc, 795 stars), Avoid AI Design (sunkaifei/FlyCms, 656 stars) and Superdesign (superdesigndev/superdesign-skill, 642 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Modern Web UI Designer?
LAIJiangFeng (a GitHub user) maintains it in LAIJiangFeng/resume-builder, which has 248 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on August 29, 2026.
Source: LAIJiangFeng/resume-builder on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.