commit ba0f4931c3e56fb55bbe8ece75ad76f1396ad65a Author: zlei9 Date: Sun Mar 29 13:06:58 2026 +0800 Initial commit with translated description diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..473210a --- /dev/null +++ b/SKILL.md @@ -0,0 +1,213 @@ +--- +name: frontend-design +description: "创建美观现代UI的专家前端设计指南。" +metadata: {"clawdbot":{"emoji":"🎨"}} +--- + +# Frontend Design Skill + +Use this skill when creating UI components, landing pages, dashboards, or any frontend design work. + +## Design Workflow + +Follow this structured approach for UI design: + +1. **Layout Design** — Think through component structure, create ASCII wireframes +2. **Theme Design** — Define colors, fonts, spacing, shadows +3. **Animation Design** — Plan micro-interactions and transitions +4. **Implementation** — Generate the actual code + +### 1. Layout Design + +Before coding, sketch the layout in ASCII format: + +``` +┌─────────────────────────────────────┐ +│ HEADER / NAV BAR │ +├─────────────────────────────────────┤ +│ │ +│ HERO SECTION │ +│ (Title + CTA) │ +│ │ +├─────────────────────────────────────┤ +│ FEATURE │ FEATURE │ FEATURE │ +│ CARD │ CARD │ CARD │ +├─────────────────────────────────────┤ +│ FOOTER │ +└─────────────────────────────────────┘ +``` + +### 2. Theme Guidelines + +**Color Rules:** +- NEVER use generic bootstrap-style blue (#007bff) — it looks dated +- Prefer oklch() for modern color definitions +- Use semantic color variables (--primary, --secondary, --muted, etc.) +- Consider both light and dark mode from the start + +**Font Selection (Google Fonts):** +``` +Sans-serif: Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk +Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono +Serif: Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville +Display: Architects Daughter, Oxanium +``` + +**Spacing & Shadows:** +- Use consistent spacing scale (0.25rem base) +- Shadows should be subtle — avoid heavy drop shadows +- Consider using oklch() for shadow colors too + +### 3. Theme Patterns + +**Modern Dark Mode (Vercel/Linear style):** +```css +:root { + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.970 0 0); + --muted: oklch(0.970 0 0); + --muted-foreground: oklch(0.556 0 0); + --border: oklch(0.922 0 0); + --radius: 0.625rem; + --font-sans: Inter, system-ui, sans-serif; +} +``` + +**Neo-Brutalism (90s web revival):** +```css +:root { + --background: oklch(1 0 0); + --foreground: oklch(0 0 0); + --primary: oklch(0.649 0.237 26.97); + --secondary: oklch(0.968 0.211 109.77); + --accent: oklch(0.564 0.241 260.82); + --border: oklch(0 0 0); + --radius: 0px; + --shadow: 4px 4px 0px 0px hsl(0 0% 0%); + --font-sans: DM Sans, sans-serif; + --font-mono: Space Mono, monospace; +} +``` + +**Glassmorphism:** +```css +.glass { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 1rem; +} +``` + +### 4. Animation Guidelines + +**Micro-syntax for planning:** +``` +button: 150ms [S1→0.95→1] press +hover: 200ms [Y0→-2, shadow↗] +fadeIn: 400ms ease-out [Y+20→0, α0→1] +slideIn: 350ms ease-out [X-100→0, α0→1] +bounce: 600ms [S0.95→1.05→1] +``` + +**Common patterns:** +- Entry animations: 300-500ms, ease-out +- Hover states: 150-200ms +- Button press: 100-150ms +- Page transitions: 300-400ms + +### 5. Implementation Rules + +**Tailwind CSS:** +```html + + +``` + +**Flowbite (component library):** +```html + + +``` + +**Icons (Lucide):** +```html + + +``` + +**Images:** +- Use real placeholder services: Unsplash, placehold.co +- Never make up image URLs +- Example: `https://images.unsplash.com/photo-xxx?w=800&h=600` + +### 6. Responsive Design + +Always design mobile-first and responsive: + +```css +/* Mobile first */ +.container { padding: 1rem; } + +/* Tablet */ +@media (min-width: 768px) { + .container { padding: 2rem; } +} + +/* Desktop */ +@media (min-width: 1024px) { + .container { max-width: 1200px; margin: 0 auto; } +} +``` + +### 7. Accessibility + +- Use semantic HTML (header, main, nav, section, article) +- Include proper heading hierarchy (h1 → h2 → h3) +- Add aria-labels to interactive elements +- Ensure sufficient color contrast (4.5:1 minimum) +- Support keyboard navigation + +### 8. Component Design Tips + +**Cards:** +- Subtle shadows, not heavy drop shadows +- Consistent padding (p-4 to p-6) +- Hover state: slight lift + shadow increase + +**Buttons:** +- Clear visual hierarchy (primary, secondary, ghost) +- Adequate touch targets (min 44x44px) +- Loading and disabled states + +**Forms:** +- Clear labels above inputs +- Visible focus states +- Inline validation feedback +- Adequate spacing between fields + +**Navigation:** +- Sticky header for long pages +- Clear active state indication +- Mobile-friendly hamburger menu + +--- + +## Quick Reference + +| Element | Recommendation | +|---------|---------------| +| Primary font | Inter, Outfit, DM Sans | +| Code font | JetBrains Mono, Fira Code | +| Border radius | 0.5rem - 1rem (modern), 0 (brutalist) | +| Shadow | Subtle, 1-2 layers max | +| Spacing | 4px base unit (0.25rem) | +| Animation | 150-400ms, ease-out | +| Colors | oklch() for modern, avoid generic blue | + +--- + +*Based on SuperDesign patterns — https://superdesign.dev* diff --git a/_meta.json b/_meta.json new file mode 100644 index 0000000..0d2fa64 --- /dev/null +++ b/_meta.json @@ -0,0 +1,6 @@ +{ + "ownerId": "kn79bhw9e6awqnf5v5y0ybsncd7ynfvp", + "slug": "superdesign", + "version": "1.0.0", + "publishedAt": 1767719074735 +} \ No newline at end of file