Skip to content
mcp/skillhub

Agent Skill

Frontend Design skill

frontend-designanbeime/skillskills/frontend-design/frontend-design/SKILL.md

网页与数字界面设计师在构建Web页面或应用组件时，若受够了千篇一律的AI味设计，请用此技能。一键生成极具视觉冲击力、排版独特、动效惊艳的生产级前端代码，告别平庸，打造令人难忘的高品质数字界面。

8.5kComplete terms in LICENSE.txt

always on

80 tokname + description

once used

766 tokSKILL.md body

bundled files

0

repo stars

8.5kGitHub

Install the Frontend Design skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/anbeime/skill --skill frontend-design

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/anbeime/skill.git /tmp/skill
mkdir -p ~/.claude/skills
cp -R /tmp/skill/skills/frontend-design/frontend-design ~/.claude/skills/frontend-design

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description80 tok
When the agent uses itThe SKILL.md instructions766 tok
Only if openedNo bundled files—

Until it is used, frontend-design costs about 17× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 93 skills from anbeime/skill would load 7,701 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Design Thinking
  • Frontend Aesthetics Guidelines

More skills from anbeime/skill

All skills in this repo
  1. PDF Processing Proanbeime/skill

    综合办公文员与软件开发工程师当需要批量处理PDF表单、提取表格或进行OCR识别时，使用内置脚本一键完成自动化提取与数据校验，彻底告别繁琐的手动录入，让复杂文档工作流高效、稳健落地。

    8.5k176 tok idle · 1,596 in use
  2. agent-teamanbeime/skill

    产品经理与项目管理专家在应对复杂项目时，使用此技能可动态组建包含“执行、指挥、评审”的专属AI团队。实时查看多智能体辩论与决策全过程，共享统一上下文记忆，一键完成从会议决策到系统构建的全流程高效协同！

    8.5k76 tok idle · 4,797 in use
  3. agentkit-multimedia-shoppinganbeime/skill

    电商运营与内容创作者在需要制作带货短视频时，用此技能一键生成9:16竖屏数字人成片。自动编排AI绘画、语音合成与视频生成，快速产出“小省导购员”专属形象与专业配音，让多模态视频制作省时省力。

    8.5k781 tok idle · 2,013 in use
  4. antinet-four-color-cardsanbeime/skill

    财务和投资分析师、律师助理与法律助手在撰写金融研报或分析法律文档时，必用此技能！基于解析文档一键生成事实蓝卡、解释绿卡、风险黄卡与行动红卡。自动完成深度剖析与风险排查，产出100%可溯源的结构化四色报告，让复杂分析高效且严谨。

    8.5k197 tok idle · 732 in use
  5. antinet-provenanceanbeime/skill

    软件开发工程师与信息安全分析师在构建多智能体系统时，当需全链路可观测与安全审计，请用此技能。它自动收集操作日志，生成可追溯证据链与向量索引，开箱即用实现系统审计与精准回放，让Agent运行安全透明。

    8.5k179 tok idle · 540 in use
  6. archifyanbeime/skill

    Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.

    8.5k130 tok idle · 3,164 in use
  7. article-illustratoranbeime/skill

    内容创作者与自媒体创作者在撰写长文缺乏视觉辅助时，当需要给文章配图或生成插图请使用。自动分析文章结构，精准识别位置并生成插画插入段落，将抽象概念具象化。一键完成智能图文排版，省去手动找图时间，大幅提升阅读体验！

    8.5k85 tok idle · 1,322 in use
  8. atutun-xhs-coveranbeime/skill

    阿囤囤风格小红书封面提示词生成。用于AI工具、效率方法、产品测评、教程部署、个人经验、播客推荐、职场认知类内容的爆款竖版封面设计。特点是真人出镜、超大柔和浅黄（#FDFFA7）/白色中文标题、粗黑描边、人物抠图描边、绿色勾选清单、emoji贴纸、箭头标注、高对比高密度构图。关键词：小红书封面、爆款封面、阿囤囤风格、AI教程封面、产品测评封面、封面提示词。

    8.5k156 tok idle · 6,467 in use