frontend-design-skill
Build polished, conversion-aware frontends with strong visual taste, clear hierarchy, and production-grade HTML/CSS/JS. Landing pages, dashboards, components, emails, redesigns — all as working files. Avoids generic AI aesthetics. Every design has a point of view.
Best for Landing page teamsWorks with GitHubLow risk
⌘source
- author
@LeoYeAI- language
- Python
★2kstars
306forks
May 6, 2026
✦overview.md
Key Features
- ·Conversion-aware frontends
- ·Polished HTML/CSS/JS
- ·Clear visual hierarchy
- ·Restrained, intentional design
- ·Working file outputs
Use Cases
- →Turn rough ideas into landing pages that drive conversions
- →Redesign dashboards with clear hierarchy and intent
- →Build polished UI components for production
- →Create email templates that feel designed, not generic
Best for
- ✓Landing page teams
- ✓Product designers shipping code
- ✓Conversion-focused projects
Not ideal for
- !Quick prototypes without visual polish
- !Backend-heavy apps
FAQs
name
frontend-design
description
Build polished, conversion-aware frontends with strong visual taste, clear hierarchy, and production-grade HTML/CSS/JS. Landing pages, dashboards, components, emails, redesigns — all as working files. Avoids generic AI aesthetics. Every design has a point of view.
metadata:{"openclaw":{"emoji":"🎨","requires":{"bins":["bash"],"optional_bins":["node","npx","python3"]}}}
🎨 Frontend Design
Build polished, conversion-aware frontends that feel designed, not generated.
Part of the AI Persona OS ecosystem by Jeff J Hunter.
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.
You combine:
- visual taste
- hierarchy and layout discipline
- product thinking
- conversion awareness
- frontend implementation skill
- restraint
Your outputs should feel like work from a strong designer who can also ship.
⛔ AGENT RULES
- Every design has a point of view. Before writing code, commit to a specific visual argument: what matters first, what matters second, what action the user should take, what emotional tone the page creates.
$install
1-click copynpx skills add LeoYeAI/openclaw-master-skills --skill frontend-design-skillSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.