skills.rest
ankaboot-source
ankaboot-sourceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generates production-grade frontend interfaces with distinctive typography, color, layout, and motion design.

2|Updated Jul 25, 2026
Search Tags:#typography#accessibility#frontend#css#color palette#web design#ui design
One-click install
npx skills add https://github.com/ankaboot-source/boucle --skill frontend-design-ankaboot-source
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/ankaboot-source/boucle/tree/main/.jcode/skills/frontend-design
Command: npx skills add https://github.com/ankaboot-source/boucle --skill frontend-design-ankaboot-source

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated interfaces tend to look generic and templated, repeating the same fonts, gradients, and card layouts. This Skill guides the creation of distinctive, production-grade web interfaces that avoid recognizable AI design patterns. ## Core Features & Use Cases - Design Direction: Commits to a bold aesthetic direction covering typography, color palettes, spatial rhythm, motion, and interaction patterns. - Reference Library: Ships detailed references on typography, color and contrast (OKLCH), spatial design, motion, interaction, responsive design, and UX writing. - Context Protocol: Requires confirmed design context (audience, use cases, brand tone) before producing any design work. - Use Case: Ask for a landing page for a new product, and receive working HTML/CSS with fluid typography, an intentional palette, staggered entrance animations, and accessible focus states instead of a generic template. ## Quick Start Use the frontend-design skill to build a landing page for my product with a bold editorial aesthetic.

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 websites look less generic?▼

Commit to a bold aesthetic direction with distinctive font pairings, tinted neutral palettes, and varied spatial rhythm. Avoid overused fonts like Inter and Roboto, cyan-on-dark color schemes, and identical card grids, which are common fingerprints of AI output.

What fonts should I use instead of Inter or Roboto?▼

Use distinctive alternatives like Instrument Sans, Plus Jakarta Sans, Outfit, Onest, or Figtree for body text. For editorial or premium feels, consider Fraunces, Newsreader, or Lora paired with a contrasting sans-serif.

Why use OKLCH instead of HSL for CSS colors?▼

OKLCH is perceptually uniform, meaning equal lightness steps look equal across hues, unlike HSL where 50% lightness varies visually by color. It also makes building consistent light and dark palette variants straightforward.

Does this skill work with dark mode design?▼

Yes, the color reference covers dark mode theming, including surface-based depth instead of shadows, desaturated accents, and semantic token layers. Dark mode requires different design decisions rather than simply inverting a light palette.

What CSS properties should I animate for smooth UI motion?▼

Animate only transform and opacity, since other properties trigger layout recalculation. Use exponential ease-out curves with 100-500ms durations, and respect prefers-reduced-motion by providing fade alternatives.

Related Skills

Explore More Design & Creative Skills→
fauzanazzfauzanazz

impeccable

Generates production-grade frontend interfaces with distinctive typography, color, and layout design.

Community
Advanced
lidge-junlidge-jun
5

vercel-deploy

Deploy web projects to Vercel with automatic framework detection.

Community
Intermediate
ricablericable

accessibility

Audit and remediate web interfaces for WCAG 2.1 accessibility barriers.

Community
Intermediate
andrewle9510andrewle9510

fd-components

Creates reusable React components with Tailwind and shadcn/ui for web apps.

Community
Advanced