agentleFS
Sign inStart free
535803710535803710/ai-rd-skills/skills/frontend-design/SKILL.md

frontend-design

Skill8 starsChanged 6 months agoMITView on GitHub

创建高质量前端界面和交互体验，适用于网页、后台页面、仪表盘、组件、落地页、工具页面和视觉优化；当用户要求设计页面、优化 UI、实现前端界面、做高质量视觉稿时使用。

Create a free account to mount
Files
SKILL.md

Frontend Design

目标

实现真实可用、视觉完整、交互清晰的前端界面。不要做只有装饰没有功能的页面。

原则

  • 先理解使用场景和用户任务，再决定布局
  • 复用项目已有设计系统、组件库和样式规范
  • 中后台页面优先信息密度、扫描效率和稳定交互
  • 落地页和展示页需要明确首屏重点和视觉资产
  • 控件要符合用途：按钮、菜单、tabs、开关、滑块、表格、表单各司其职
  • 文案要直接，不用页面文字解释“如何使用这个页面”
  • 避免过度渐变、装饰卡片、空洞 hero 和模板化 AI 风格

验证

完成后检查移动端、桌面端、文本溢出、按钮状态、空数据、加载态和错误态。涉及 3D、canvas 或复杂动画时需要实际浏览器验证。

Download now (ZIP)

  • Other versions186 projects use a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 186

    1. anthropics/skills★ 186ksame name
    2. bytedance/deer-flow★ 85ksame name
    3. anthropics/claude-plugins-official★ 46ksame name
    4. novuhq/novu★ 40ksame name
    5. Dokploy/dokploy★ 38ksame name
    6. markmead/hyperui★ 12ksame name
    7. mengxi-ream/read-frog★ 10ksame name
    8. 1weiho/open-slide★ 9.6ksame name
    9. basketikun/infinite-canvas★ 9.5ksame name
    10. mfts/papermark★ 9.2ksame name

    176 more not listed

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use brief-to-tasks, file-reading and 10 more.

    Other files people use alongside this one.

    Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
    • julianoczkowskiSkill

      brief-to-tasks

      Break a design brief into an ordered checklist of independently buildable tasks using vertical slices. Saves as a markdown checklist. Use when user wants to break down work, create tasks from a brief, plan implementation order, or mentions "tasks" or "breakdown".

      Also in 7 projects that use this

    • SeifBenayedSkill

      file-reading

      Use this skill when a file has been uploaded but its content is NOT in your context — only its path at /mnt/user-data/uploads/ is listed in an uploaded_files block. This skill is a router: it tells you which tool to use for each file type (pdf, docx, xlsx, csv, json, images, archives, ebooks) so you read the right amount the right way instead of blindly running cat on a binary. Triggers: any mention of /mnt/user-data/uploads/, an uploaded_files section, a file_path tag, or a user asking about an uploaded file you have not yet read. Do NOT use this skill if the file content is already visible in your context inside a documents block — you already have it.

      Also in 6 projects that use this

    • yawningwhaleAISkill

      albert-dm

      Reply to DMs and messages the way Albert would. Use when the user asks "how would Albert reply to this", pastes a conversation and wants an Albert-style response, or asks you to draft/write a DM in Albert's voice. Albert sells AI voice agents / automations to local service businesses (Go High Level, lead follow-up, bookings).

      Also in 5 projects that use this

    • yawningwhaleAISkill

      instantly-campaign

      Create a new Instantly cold-email campaign in the proven 5-email structure of the user's top-performing campaign (~16% reply rate). Use when the user wants to launch a new outbound campaign, write a cold email sequence, create an Instantly campaign, draft outreach for a new service or niche, or set up a sales sequence.

      Also in 6 projects that use this

    • HK-hubSkill

      teach-impeccable

      One-time setup that gathers design context for your project and saves it to your AI config file. Run once to establish persistent design guidelines.

      Also in 17 projects that use this

    • huyvpSkill

      cost-reducer

      Reduce cloud, infrastructure, and operational costs while maintaining performance. Use when writing database queries, configuring cloud resources, optimizing bundles, setting up caching, choosing between services, sizing instances, configuring CDN, managing storage, or reviewing code for cost inefficiencies. Covers AWS/GCP/Vercel pricing, database optimization, serverless tuning, image pipelines, observability costs, and FinOps practices.

      Also in 9 projects that use this

    • +3 more from yawningwhaleAI
  • In this repository17 other files it gives its agents.

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free