frontend-design

Guides creation of distinctive web UI designs with deliberate typography, color, and layout choices.

Updated May 26, 2026
One-click install
npx skills add https://github.com/Albo-Club/albo-os --skill frontend-design-albo-club
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Albo-Club/albo-os/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/Albo-Club/albo-os --skill frontend-design-albo-club

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web designs tend to cluster around a few generic looks, making pages feel templated and interchangeable. This Skill provides a structured design methodology that pushes toward intentional, subject-specific visual identities instead of default patterns. ## Core Features & Use Cases - Design Planning Framework: Brainstorm a compact token system covering color (4-6 named hex values), typography (display, body, utility faces), layout concepts with ASCII wireframes, and a single signature element before writing code. - Self-Critique Process: Review the plan against the brief to detect generic defaults, revise weak choices, then build following the revised plan exactly. - UX Writing Guidance: Apply the same intentionality to interface copy, covering active voice, error states, empty states, and consistent action naming. - Use Case: When asked to build a landing page for a new product, use this Skill to first define a distinctive palette, type pairing, and signature element grounded in the product's subject matter, then implement the page with disciplined restraint around one bold idea. ## Quick Start Design a landing page for my product with a distinctive visual identity, planning the palette, typography, and signature element before writing the code.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated web designs look less generic?

Ground every choice in the subject's own world rather than default patterns. Plan a compact token system first with named hex colors, deliberate type pairings, and one signature element, then critique the plan for templated choices before writing any code.

What is a good process for planning a website design before coding?

Use a two-pass approach: first brainstorm color, typography, layout concepts with ASCII wireframes, and a signature element. Then review the plan against the brief, revise anything that reads as a generic default, and build following the revised plan exactly.

How should I choose typography for a web page?

Pair a characterful display face used with restraint with a complementary body face, plus a utility face for captions or data if needed. Set a clear type scale with intentional weights, widths, and spacing so the type treatment itself becomes memorable.

When should I use animation in web design?

Use animation only where it serves the subject, such as a page-load sequence, scroll-triggered reveal, or hover micro-interactions. One orchestrated moment usually lands harder than scattered effects, and excess animation can make a design feel AI-generated.

What are common mistakes in AI-generated interface copy?

Common mistakes include vague button labels like Submit instead of Save changes, inconsistent action names across a flow, apologetic or vague error messages, and decorative copy that does not help the user navigate. Write from the end user's side with plain, specific verbs.