Build polished, conversion-aware frontends that feel designed, not generated
You are a frontend design and implementation specialist for OpenClaw. Your job is to turn rough ideas, prompts, screenshots, or business goals into polished frontend experiences that feel intentional, contemporary, and useful. You do not just "make it look nice." You make it feel designed.
openclaw install frontend-design-skillPaste this command into your OpenClaw terminal to install automatically
These rules are baked into the skill and enforced on every output.
Before writing code, commit to a specific visual argument: what matters first, what action the user should take, what emotional tone the page creates.
Never produce designs that look like default AI output — no lazy font choices, no bland gradients, no identical three-card grids, no template residue. If it could come from any random prompt, start over.
Every output must open in a browser and work. No 404s. No broken layouts. No scripts that error on load. Single-file HTML/CSS/JS by default.
Reads SOUL.md, KNOWLEDGE.md, and brand files before designing. Uses your existing brand colors, voice, and assets — doesn't invent a new palette when one already exists.
All designs go to ~/workspace/designs/[project-slug]/. Named descriptively with kebab-case. Organized and findable.
Build the thing. Don't write paragraphs about what you'd build. Every output is a working file, not a plan or a mockup description.
The skill selects from these design directions based on your context. You can also specify one directly.
Serif display fonts, dramatic whitespace, content-first, strong type hierarchy
Good for: Blogs, thought leadership, luxury brands
Monospace, harsh borders, raw backgrounds, anti-design on purpose, high contrast
Good for: Developer tools, creative agencies, bold brands
Thin serifs, dark backgrounds, gold/cream accents, generous spacing, restrained motion
Good for: High-end services, portfolios, premium products
Neon accents on dark, CRT/scanline effects, pixel fonts mixed with clean sans
Good for: Tech products, gaming, AI/ML tools
Grid-locked, sans-serif, lots of air, monochromatic with one accent
Good for: SaaS, enterprise, professional services
Big type, saturated colors, layered elements, overlap, controlled chaos
Good for: Creative agencies, events, entertainment
Warm tones, rounded shapes, subtle textures, earthy palette
Good for: Wellness, food, lifestyle, sustainability
Gold + black, geometric patterns, ornamental borders, symmetry
Good for: Finance, law, premium events
Monospace, exposed grid, data-dense, minimal decoration, function over form
Good for: Dashboards, tools, internal apps
Conversion-optimized with clear CTAs and hierarchy
Data-dense, functional, and visually organized
Nav, hero, pricing tables, footers, forms
HTML emails that render across all clients
Editorial layouts with strong typography
High-urgency pages built to convert
Reads SOUL.md and KNOWLEDGE.md. Extracts brand colors, voice, tone, and audience. If no brand files exist, infers from your prompt.
Determines page type, audience, primary goal, primary CTA, tone, and device priority. Makes strong assumptions without asking unnecessary questions.
If you provide a screenshot, extracts palette, layout, typography, and vibe. Uses it as a starting point — improves the weak parts, doesn't just copy.
Picks a lane: aesthetic direction, layout rhythm, typography approach, color strategy, motion style. No mixed aesthetics.
Implements the design with visual hierarchy, responsive layout, usable interactions, intentional spacing, and at least one motion moment.
Every form and CTA does something on click. Email captures get a thank-you state. Links get real hrefs. Nothing is left broken.
Install Frontend Design and start shipping polished, conversion-aware pages that have a real point of view. No templates. No AI slop. Just craft.
Install on ClawHub →Design with your brand's voice, build the frontend, then present and sell it — all from your agent.
Frontend Design reads your SOUL.md for brand colors, voice, and tone. Build your brand file first for consistent output.
Once the page is built, turn it into a pitch deck. Same brand context, different output format.
Pair with AI Proposal Generator to deliver both a designed page and a professional proposal to clients.
Every skill is free to install on ClawHub and works with AI Persona OS. Build your complete agent stack.
The complete operating system for OpenClaw agents
Memory, reliability, meeting notes, daily briefings. The foundation every other skill builds on. Install this first.
Messy notes → Clear action items. Instantly.
Paste any meeting notes, transcript, or text. Get summaries, action items with owners and deadlines, and a to-do list tracker.
Start every day focused
Morning briefing with overdue tasks, today's priorities, calendar overview, and context from recent meetings.
Professional HTML proposals from meeting notes
5 proposal styles (Corporate, Entrepreneur, Creative, Consultant, Technical). Auto-populated from your meeting context.
Cut API costs 50–90% without changing your default model
Add cheap model aliases to your OpenRouter setup for tasks from simple to complex. Smart routing based on task complexity.
The personality builder for OpenClaw agents
Browse 12 pre-built souls, build your own with a guided interview (Quick or Deep), and export a SOUL.md file for your agent.
Interview-driven pitch deck generator
Tell it what you built, who's in the room, pick an angle. Get a complete slide deck with speaker notes — built from facts, not fantasies.
The complete outreach and pipeline system
Guided setup builds your config, Template Forge creates custom email sequences, 3-tier architecture scales from manual to fully automated.
Build polished, conversion-aware frontends
Turn rough ideas into production-grade HTML/CSS/JS. Landing pages, dashboards, components, email templates. Every design has a point of view — no AI slop.
Get weekly tips on building better AI agents
No spam, just quality insights