# Send Frontend Design Ultimate to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - Download the package from Yavira. - Extract it into a folder your agent can access. - Paste one of the prompts below and point your agent at the extracted folder. ## Suggested prompts ### New install ```text I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete. ``` ### Upgrade existing ```text I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "frontend-design-ultimate", "name": "Frontend Design Ultimate", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/kesslerio/frontend-design-ultimate", "canonicalUrl": "https://clawhub.ai/kesslerio/frontend-design-ultimate", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/frontend-design-ultimate", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-design-ultimate", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "README.md", "REVIEW.md", "SKILL.md", "references/design-philosophy.md", "references/mobile-patterns.md", "references/shadcn-components.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "frontend-design-ultimate", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-03T11:49:40.407Z", "expiresAt": "2026-05-10T11:49:40.407Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-design-ultimate", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-design-ultimate", "contentDisposition": "attachment; filename=\"frontend-design-ultimate-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "frontend-design-ultimate" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/frontend-design-ultimate" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/frontend-design-ultimate", "downloadUrl": "https://openagent3.xyz/downloads/frontend-design-ultimate", "agentUrl": "https://openagent3.xyz/skills/frontend-design-ultimate/agent", "manifestUrl": "https://openagent3.xyz/skills/frontend-design-ultimate/agent.json", "briefUrl": "https://openagent3.xyz/skills/frontend-design-ultimate/agent.md" } } ``` ## Documentation ### Frontend Design Ultimate Create distinctive, production-grade static sites from text requirements alone. No mockups, no Figma — just describe what you want and get bold, memorable designs. Stack: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion Output: Vite (static HTML) or Next.js (Vercel-ready) ### Quick Start "Build a SaaS landing page for an AI writing tool. Dark theme, editorial typography, subtle grain texture. Pages: hero with animated demo, features grid, pricing table, FAQ accordion, footer." ### Design Thinking (Do This First) Before writing any code, commit to a BOLD aesthetic direction: ### 1. Understand Context Purpose: What problem does this interface solve? Who uses it? Audience: Developer tools? Consumer app? Enterprise? Creative agency? Constraints: Performance requirements, accessibility needs, brand guidelines? ### 2. Choose an Extreme Tone Pick ONE and commit fully — timid designs fail: ToneCharacteristicsBrutally MinimalSparse, monochrome, massive typography, raw edgesMaximalist ChaosLayered, dense, overlapping elements, controlled disorderRetro-FuturisticNeon accents, geometric shapes, CRT aestheticsOrganic/NaturalSoft curves, earth tones, hand-drawn elementsLuxury/RefinedSubtle animations, premium typography, restrained paletteEditorial/MagazineStrong grid, dramatic headlines, whitespace as featureBrutalist/RawExposed structure, harsh contrasts, anti-designArt Deco/GeometricGold accents, symmetry, ornate patternsSoft/PastelRounded corners, gentle gradients, friendlyIndustrial/UtilitarianFunctional, monospace, data-dense ### 3. Define the Unforgettable Element What's the ONE thing someone will remember? A hero animation? Typography treatment? Color combination? Unusual layout? ### Typography — NEVER Generic BANNED: Inter, Roboto, Arial, system fonts, Open Sans DO: Distinctive, characterful choices that elevate the design. Use CaseApproachDisplay/HeadlinesBold personality — Clash, Cabinet Grotesk, Satoshi, Space Grotesk (sparingly), Playfair DisplayBody TextRefined readability — Instrument Sans, General Sans, Plus Jakarta SansMonospace/CodeDM Mono, JetBrains Mono, IBM Plex MonoPairing StrategyContrast weights (thin display + bold body), contrast styles (serif + geometric sans) Size Progression: Use 3x+ jumps, not timid 1.5x increments. ### Color & Theme BANNED: Purple gradients on white, evenly-distributed 5-color palettes DO: Dominant + Sharp Accent: 70-20-10 rule (primary-secondary-accent) CSS Variables: --primary, --accent, --surface, --text Commit to dark OR light: Don't hedge with gray middle-grounds High contrast CTAs: Buttons should pop dramatically :root { --bg-primary: #0a0a0a; --bg-secondary: #141414; --text-primary: #fafafa; --text-secondary: #a1a1a1; --accent: #ff6b35; --accent-hover: #ff8555; } ### Motion & Animation Priority: One orchestrated page load > scattered micro-interactions High-Impact Moments: Staggered hero reveals (animation-delay) Scroll-triggered section entrances Hover states that surprise (scale, color shift, shadow depth) Smooth page transitions Implementation: CSS-only for simple animations Framer Motion for React (pre-installed via init scripts) Keep durations 200-400ms (snappy, not sluggish) ### Spatial Composition BANNED: Centered, symmetrical, predictable layouts DO: Asymmetry with purpose Overlapping elements Diagonal flow / grid-breaking Generous negative space OR controlled density (pick one) Off-grid hero sections ### Backgrounds & Atmosphere BANNED: Solid white/gray backgrounds DO: Gradient meshes (subtle, not garish) Noise/grain textures (SVG filter or CSS) Geometric patterns (dots, lines, shapes) Layered transparencies Dramatic shadows for depth Blur effects for glassmorphism /* Subtle grain overlay */ .grain::before { content: ''; position: fixed; inset: 0; background: url("data:image/svg+xml,...") repeat; opacity: 0.03; pointer-events: none; } ### Mobile-First Patterns See references/mobile-patterns.md for detailed CSS. ### Critical Rules PatternDesktopMobile FixHero with hidden visual2-column gridSwitch to display: flex (not grid)Large selection listsHorizontal scrollAccordion with category headersMulti-column formsSide-by-sideStack verticallyStatus/alert cardsInlinealign-items: center + text-align: centerFeature grids3-4 columnsSingle column ### Breakpoints /* Tablet - stack sidebars */ @media (max-width: 1200px) { } /* Mobile - full single column */ @media (max-width: 768px) { } /* Small mobile - compact spacing */ @media (max-width: 480px) { } ### Font Scaling @media (max-width: 768px) { .hero-title { font-size: 32px; } /* from ~48px */ .section-title { font-size: 24px; } /* from ~32px */ .section-subtitle { font-size: 14px; } /* from ~16px */ } ### Option A: Vite (Pure Static) # 1. Initialize bash scripts/init-vite.sh my-site cd my-site # 2. Develop npm run dev # 3. Build static files npm run build # Output: dist/ # 4. Bundle to single HTML (optional) bash scripts/bundle-artifact.sh # Output: bundle.html ### Option B: Next.js (Vercel Deploy) # 1. Initialize bash scripts/init-nextjs.sh my-site cd my-site # 2. Develop npm run dev # 3. Deploy to Vercel vercel ### Vite Static my-site/ ├── src/ │ ├── components/ # React components │ ├── lib/ # Utilities, cn() │ ├── styles/ # Global CSS │ ├── config/ │ │ └── site.ts # Editable content config │ ├── App.tsx │ └── main.tsx ├── index.html ├── tailwind.config.ts └── package.json ### Next.js my-site/ ├── app/ │ ├── layout.tsx │ ├── page.tsx │ └── privacy/page.tsx ├── components/ ├── lib/ ├── config/ │ └── site.ts └── tailwind.config.ts ### Site Config Pattern Keep all editable content in one file: // config/site.ts export const siteConfig = { name: "Acme AI", tagline: "Write better, faster", description: "AI-powered writing assistant", hero: { badge: "Now in beta", title: "Your words,\\nsupercharged", subtitle: "Write 10x faster with AI that understands your style", cta: { text: "Get Started", href: "/signup" }, secondaryCta: { text: "Watch Demo", href: "#demo" }, }, features: [ { icon: "Zap", title: "Lightning Fast", description: "..." }, // ... ], pricing: [ { name: "Free", price: 0, features: [...] }, { name: "Pro", price: 19, features: [...], popular: true }, ], faq: [ { q: "How does it work?", a: "..." }, ], footer: { links: [...], social: [...], } } ### Pre-Implementation Checklist Run this before finalizing any design: ### Design Quality Typography is distinctive (no Inter/Roboto/Arial) Color palette has clear dominant + accent (not evenly distributed) Background has atmosphere (not solid white/gray) At least one memorable/unforgettable element Animations are orchestrated (not scattered) ### Mobile Responsiveness Hero centers on mobile (no empty grid space) All grids collapse to single column Forms stack vertically Large lists use accordion (not horizontal scroll) Font sizes scale down appropriately ### Form Consistency Input, select, textarea all styled consistently Radio/checkbox visible (check transparent-border styles) Dropdown options have readable backgrounds Labels use CSS variables (not hardcoded colors) ### Accessibility Color contrast meets WCAG AA (4.5:1 text, 3:1 UI) Focus states visible Semantic HTML (nav, main, section, article) Alt text for images Keyboard navigation works ### shadcn/ui Components 10 common components pre-installed (button, badge, card, accordion, dialog, navigation-menu, tabs, sheet, separator, avatar, alert). Add more with npx shadcn@latest add [name] or install all with npx shadcn@latest add --all. See references/shadcn-components.md for full component reference. Most used for landing pages: Button, Badge — CTAs and labels Card — Feature cards, pricing tiers Accordion — FAQ sections Dialog — Modals, video players NavigationMenu — Header nav Tabs — Feature showcases Carousel — Testimonials ### References references/design-philosophy.md — Extended anti-AI-slop guidance references/mobile-patterns.md — Detailed responsive CSS references/shadcn-components.md — Component quick reference templates/site-config.ts — Full siteConfig example ### Prompt → Output Input: "Portfolio site for a photographer. Minimal, editorial feel. Grid gallery with lightbox, about section, contact form." Design Decisions: Tone: Editorial/Magazine Typography: Cormorant Garamond (display) + Inter... wait, banned. Plus Jakarta Sans (body) Color: Near-black bg (#0c0c0c), warm white text (#f5f5f0), copper accent (#b87333) Unforgettable: Full-bleed hero image with text overlay that reveals on scroll Motion: Gallery images fade in staggered on scroll Output: Complete Next.js project with responsive gallery, lightbox component, and contact form with validation. Based on Anthropic's frontend-design, web-artifacts-builder, and community frontend-design-v2 skills. ## Trust - Source: tencent - Verification: Indexed source record - Publisher: kesslerio - Version: 1.0.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-05-03T11:49:40.407Z - Expires at: 2026-05-10T11:49:40.407Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/frontend-design-ultimate) - [Send to Agent page](https://openagent3.xyz/skills/frontend-design-ultimate/agent) - [JSON manifest](https://openagent3.xyz/skills/frontend-design-ultimate/agent.json) - [Markdown brief](https://openagent3.xyz/skills/frontend-design-ultimate/agent.md) - [Download page](https://openagent3.xyz/downloads/frontend-design-ultimate)