npx skills add ...
npx skills add factory-ai/factory-plugins --skill frontend-design
npx skills add factory-ai/factory-plugins --skill frontend-design
Build good-looking web interfaces. Use when: - User asks you to build a web app, website, landing page, or HTML page - User asks for a one-off tool, utility, or demo app - User is starting a new frontend project - User wants to improve how something looks - User mentions UI, design, styling, or making something look better This applies to ANY frontend work, not just "design" tasks. Even simple apps benefit from basic design principles.
Practical tactics for designing and building frontend interfaces. This is about making things look good and work well, not about frameworks or tooling.
Before touching code, understand what you're trying to achieve emotionally and aesthetically.
What feeling should this interface convey? Professional and trustworthy? Playful and fun? Calm and minimal? Energetic and bold?
The tone affects every decision: colors, typography, spacing, imagery, micro-interactions.
If there's an existing design language, follow it first. Match the existing tone before introducing new elements. Consistency matters more than novelty.
Look at references. What interfaces do you admire that have a similar purpose? What makes them work?
Collect screenshots, note what you like about each. Is it the generous whitespace? The bold typography? The subtle shadows? The color palette?
Don't copy directly, but understand the principles behind what you're drawn to.
Constraints make design easier, not harder. They eliminate decision fatigue.
Pick a base unit (4px or 8px) and stick to multiples of it.
Every margin, padding, and gap should come from this scale. No magic numbers like 13px or 47px.
Pick a ratio (1.25 or 1.333 are common) and generate your sizes:
Each size has a purpose: body text, subheadings, headings, display text.
Start minimal:
You can always add more later. Starting with fewer colors forces you to use them intentionally.
Use a 12-column grid with consistent gutters. Most layouts can be built with 12 columns.
Designing directly in code (HTML/CSS) has advantages:
Start with mobile, then scale up. It's easier to add space than to remove it.
Cards group related content. Keep them simple:
Don't leave empty areas blank. Show:
Generated designs often look generic. To avoid this:
Be specific about what you want. "A modern dashboard" gives you something forgettable. "A dashboard with a dark theme, data visualizations using a blue-to-purple gradient, compact information density, inspired by trading terminals" gives you something distinctive.
Add constraints. Limit your color palette. Commit to a specific type scale. Use a consistent spacing system. Constraints create cohesion.
Look at real references. Find interfaces you admire. Understand why they work. Borrow principles, not pixels.
Edit ruthlessly. Generated designs often have too much going on. Remove decorative elements that don't serve a purpose. Simplify until it feels too simple, then add back one thing.
Test with real content. Lorem ipsum hides problems. Use realistic text lengths, real images, actual data.
Design for mobile first, then add complexity for larger screens.
Breakpoints (common):
What changes between breakpoints:
What stays the same:
These aren't nice-to-haves. They're requirements for usable interfaces.
Before shipping: