前端設計
📖 技能介紹
name: Frontend Design slug: frontend version: "1.0.2" homepage: https://clawic.com/skills/frontend description: Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI. changelog: "Renamed to better reflect design-focused capabilities and guidance." metadata: {"clawdbot":{"emoji":"🖥️","requires":{"bins":[]},"os":["linux","darwin","win32"]}}
When to Use
User needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.
Quick Reference
| Topic | File |
|---|---|
| Stack & tooling | stack.md |
| Typography rules | typography.md |
| Color systems | colors.md |
| Mobile patterns | mobile.md |
| Animation | animation.md |
| Examples | examples.md |
Core Rules
1. Mobile-First Always
- Start with mobile layout, enhance upward
- Every grid must collapse to single column
- Touch targets minimum 44x44px
- Test on real devices, not just simulators
2. Typography Matters
- Avoid generic fonts (Inter, Roboto, Arial)
- Use dramatic size jumps (2x+), not timid increments
- Body text 16-18px minimum
- See
typography.mdfor specific recommendations
3. Color with Purpose
- 70-20-10 rule: primary, secondary, accent
- Commit to light OR dark — no muddy mid-grays
- Never solid white backgrounds — add depth
- See
colors.mdfor CSS variables and patterns
4. Feedback on Every Interaction
- Acknowledge taps within 100ms
- Optimistic updates for instant feel
- Loading states for operations >1s
- Preserve user input on errors
5. Accessibility Non-Negotiable
小蔥技能7w4.net持續更新中。
- Color contrast 4.5:1 (text), 3:1 (UI)
- Focus states on all interactive elements
- Semantic HTML (nav, main, section, article)
- Keyboard navigation works for everything
6. Performance from Start
- Lazy load below-fold content
- Image placeholders prevent layout shift
- Code split heavy components
- Target LCP <2.5s, CLS <0.1
7. One Memorable Element
- Every page needs one unforgettable design choice
- Typography treatment, hero animation, unusual layout
- Timid designs fail — commit to an aesthetic
Frontend Traps
| Trap | Consequence | Fix |
|---|---|---|
| Generic fonts | Looks like every other site | Use distinctive fonts |
| Solid white backgrounds | Flat, lifeless | Add gradients, grain, depth |
| Mobile as afterthought | Broken for 60% of users | Mobile-first always |
| Form error clears input | User rage | Preserve input, highlight error |
| No loading states | User thinks broken | Show progress immediately |
| Timid type scale | No visual hierarchy | Use 2x+ jumps for headlines |
Scope
This skill ONLY: - Provides frontend patterns and guidelines - Recommends stack and tooling choices - Guides responsive implementation
This skill NEVER: - Makes network requests - Accesses user data - Stores any information
Security & Privacy
This skill is read-only guidance. No data is collected, sent, or stored.
Feedback
- If useful:
clawhub star frontend - Stay updated:
clawhub sync
🤖 AI 評測
這個Skill質量較好，它把前端介面設計要做的事講得很清楚，從怎麼選字型顏色、怎麼做動畫效果、到怎麼適配手機螢幕都有涉及，還給了可以直接用的程式碼示例。優點是實用、規則明確，比如專門強調不要用那些爛大街的字型、要給背景加層次感等；缺點是一些小細節說得不夠詳細，而且有個小問題——文件裡版本號對不上，可能讓使用者困惑。總體適合需要做漂亮前端介面的人參考。
