ui-ux-devGenerate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.
Install via ClawdBot CLI:
clawdbot install wing8169/ui-ux-devGenerate production-quality React pages from natural language, serve live, iterate until satisfied.
Check TOOLS.md for ### UI Designer config. If missing, run first-time setup:
bash scripts/setup.sh <serve_dir>/
βββ project-a/
β βββ project.json (config: name, preferences, design system, pages)
β βββ assets/ (images, converted to .webp)
β βββ landing/index.html (React page via CDN)
β βββ about/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() { return <div>...</div>; }
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>
Critical: Message the user at EVERY action β not just milestones. If you're reading a file, say "Reading project config...". If you're writing HTML, say "Writing bounty page...". If you're taking a screenshot, say "Taking screenshot...". The user should never wonder what you're doing. Treat it like a live build log.
Ask: "What's the project name?"
// exists: read project.json, show current setup and existing pages, ask if amending or addingproject.jsonAsk about design preferences (style, font, colors, brand assets).
Save to project.json.
Ask: "What slug for this page?"
Ask about page content + design system (see Design Principles below).
Update project.json with design system details.
Generate the React page. Apply Design Principles strictly.
bash scripts/screenshot.sh "http://localhost:<port>/<project>/<slug>/" /tmp/<slug>-review.png 1400 900
Analyze with image tool. Fix issues. Re-screenshot. Also check mobile (width=390).
Do at least one desktop + one mobile review pass before sharing.
Send live URL + screenshot to user.
Ask for feedback. Apply changes β re-screenshot β share. Repeat.
If user provides images:
/assets/ bash scripts/convert-image.sh [quality] ../assets/filename.webpZip the project folder and send:
cd <serve_dir> && zip -r /tmp/<project>.zip <project>/
Send zip via message tool with filePath. The CDN-based React pages work standalone β just open index.html or serve with any static server.
Convert all user-provided images to .webp for performance:
bash scripts/convert-image.sh input.png output.webp 80
For placeholder images during prototyping:
https://picsum.photos/seed/// https://placehold.co/x// Apply these consistently to every generated page. These are non-negotiable quality standards.
transition class to all interactive elements. Duration 150-200ms.loading="lazy" to images below the fold.aspect-video or aspect-square classes to prevent layout shift.Generated Feb 28, 2026
A tech startup needs a professional landing page to showcase their new app and capture leads. The UI Designer can generate a responsive React page with clear CTAs, brand-aligned colors, and optimized images, enabling quick iteration based on founder feedback without hiring a developer.
An online retailer wants to prototype a sales dashboard for internal use. The tool can create a functional UI with data visualizations and navigation, using Tailwind for styling and live previews to refine layout and usability before full development.
A conference organizer needs a one-page website for an upcoming event with schedule, speaker bios, and registration. The UI Designer can build a visually appealing page with responsive design, image optimization, and easy updates as details change.
A freelance designer or developer requires a personal portfolio to showcase work. The tool generates a clean, mobile-friendly React page with project galleries and contact forms, allowing quick customization and export for hosting.
A company needs to mock up an internal admin tool for managing customer data. The UI Designer can produce a functional prototype with form elements and tables, facilitating stakeholder review and iteration before coding begins.
Offer a free tier for basic UI generation with limited projects, and charge for advanced features like custom domains, premium templates, and team collaboration. Revenue comes from monthly subscriptions, targeting small businesses and freelancers.
Sell licenses to design and development agencies for rapid client prototyping. Include features like white-labeling and export options, with pricing based on team size or project volume. Revenue is generated through annual contracts.
Integrate with platforms like WordPress or Shopify to allow users to generate and deploy designs directly. Monetize through transaction fees or commissions on template sales, appealing to non-technical users building online stores.
π¬ Integration Tip
Integrate with version control systems like Git to track design iterations and collaborate with developers, ensuring seamless handoff from prototype to production code.
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Build scalable, themable Tailwind CSS component libraries using CVA for variants, compound components, design tokens, dark mode, and responsive grids.
Create award-winning, memorable websites with advanced animations, creative interactions, and distinctive visual experiences. Use this skill when building sites that need to be exceptionalβportfolio sites, agency showcases, product launches, or any project where "wow factor" matters.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Searchable UI/UX design databases: 50+ styles, 97 palettes, 57 font pairings, 99 UX rules, 25 chart types. CLI generates design systems from natural language. Data-driven complement to ui-design.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.