Ui Designer
Ship distinctive web UIs—landing pages, dashboards, and React or HTML/CSS layouts—with a strong visual direction instead of generic AI-styled components.
Overview
ui-designer is an agent skill for the Build phase that produces ship-ready, visually distinctive frontend code and UI design for web components, pages, and applications.
Install
npx skills add https://github.com/daniel-dan-conrad/ui-designer-skill --skill ui-designerWhat is this skill?
- Applies to websites, landing pages, dashboards, React components, and HTML/CSS layouts
- Mandatory pre-coding pass: Purpose, Tone, and daring visual direction (minimal, brutalist, editorial, etc.)
- Delivers deployment-ready frontend code with intentional typography, color, and layout choices
- Explicitly avoids cookie-cutter “AI slop” aesthetics
- Works from user briefs that may include audience, intent, and technical constraints
- Four pre-coding context questions including Purpose and Tone
Adoption & trust: 3.3k installs on skills.sh; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You can ship features quickly but every interface looks like the same generic AI template, undermining trust and brand.
Who is it for?
Solo founders and agent-assisted devs building landing pages, SaaS dashboards, or marketing sites who want elevated UI without hiring a studio first.
Skip if: Projects with locked Figma systems where the agent should only pixel-match specs, or native mobile-first apps outside web frontend scope.
When should I use this skill?
User wants web components, pages, artifacts, posters, or applications styled or built (websites, landing pages, dashboards, React, HTML/CSS) with elevated, non-generic design.
What do I get? / Deliverables
You receive working frontend code anchored to a clear, bold visual direction that reads as custom-designed rather than boilerplate.
- Deployment-ready frontend code (components or pages)
- Documented visual direction aligned to chosen tone
Recommended Skills
Journey fit
Interface construction and polish happen in Build once scope is known and before launch distribution work. The skill targets components, pages, styling, and frontend code quality—not backend APIs or growth copy alone.
How it compares
Use for opinionated visual design plus code— not wireframe-only planning skills or backend API generators.
Common Questions / FAQ
Who is ui-designer for?
Builders and designers pairing with agents on web frontend work who want distinctive, production-oriented UI instead of default model styling.
When should I use ui-designer?
Use it during Build when creating or restyling websites, landing pages, dashboards, React components, posters, or any task where web UI quality and aesthetics matter.
Is ui-designer safe to install?
It focuses on generating frontend code from your brief; review the Security Audits panel on this Prism page and inspect dependencies and assets before deploying.
SKILL.md
READMESKILL.md - Ui Designer
Use this skill to produce singular, deployment-ready frontend interfaces that escape the bland "AI slop" look. Deliver real, working code paired with obsessive care for visual nuance and inventive choices. Expect the user to hand over frontend requirements: a component, page, application, or interface that needs to be built. Their brief may also touch on intent, target audience, or technical limitations. ## Setting the Visual Direction Do not start coding until you've absorbed the context and committed to a DARING visual direction. Work through these four questions first: - **Purpose** — Which problem is this interface tackling, and who will be using it? - **Tone** — Pick something extreme: ruthlessly minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian — and many more besides. Treat these flavors as launchpads, then craft a version that genuinely embodies the direction you've picked. - **Constraints** — The technical boundaries you must operate inside (framework, performance, accessibility). - **Differentiation** — What turns this into something UNFORGETTABLE? Which single element will stick in someone's memory? **CRITICAL**: Settle on one unambiguous conceptual direction and execute it with precision. Audacious maximalism and pared-back minimalism are both valid — what matters is deliberateness, not loudness. ## The Bar for Shipped Output Whatever you build (HTML/CSS/JS, React, Vue, or similar) must be: - Production-ready and operational - Striking enough to stick in memory - Anchored in a single, intentional aesthetic point of view - Polished obsessively down to the smallest detail ## Levers of Craft Concentrate on: - **Typography** — Pick fonts that are striking, distinctive, and full of personality. Don't fall back on commonplace stacks like Arial and Inter; instead, select unconventional typefaces with real character that lift the interface — surprising, characterful choices. Pair a memorable display face with a refined body face. - **Color & Theme** — Commit to a unified visual identity. Rely on CSS variables to keep everything coherent. A bold dominant color punctuated by crisp accents will outperform a flat, evenly-weighted palette every time. - **Motion** — Use animation for effects and micro-interactions. For raw HTML, prefer CSS-only solutions first. In React, use the Motion library when it's available. Concentrate animation on high-impact moments: one carefully choreographed page entrance with staggered reveals (via animation-delay) creates more delight than a smattering of tiny touches. Add scroll-triggered transitions and hover states that surprise. - **Spatial Composition** — Layouts that defy expectation. Asymmetry. Overlapping forms. Diagonal flow. Components that crack the grid. Lavish whitespace OR controlled density. - **Backgrounds & Visual Details** — Build atmosphere and depth instead of defaulting to flat colors. Add contextual effects and textures that echo the broader aesthetic. Employ inventive treatments such as gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays. ## Aesthetics to Reject NEVER fall back on stock AI-styled aesthetics: the worn-out font stacks (Inter, Roboto, Arial, system fonts), tired color combinations (purple gradients over white backgrounds