ce-frontend-design

Build distinctive frontend interfaces with design guidelines for typography, color, and accessibility.

Updated Mar 29, 2026
One-click install
npx skills add https://github.com/Santiagoisper/BOPE_VERSION_DEFINITIVA --skill ce-frontend-design-santiagoisper
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ce-frontend-design
Source: https://github.com/Santiagoisper/BOPE_VERSION_DEFINITIVA/tree/main/.agents/skills/compound-engineering/ce-frontend-design
Command: npx skills add https://github.com/Santiagoisper/BOPE_VERSION_DEFINITIVA --skill ce-frontend-design-santiagoisper

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps build distinctive, production-grade frontend interfaces with genuine design quality, avoiding generic AI aesthetics.

Core Features & Use Cases

  • Design Quality Assurance: Ensures interfaces are distinctive, not AI-generated.
  • Full Lifecycle Support: Covers detection, planning, building, and verification of design work.
  • Contextual Design: Adapts to existing design systems and user instructions.
  • Typography, Color, & Theme: Offers guidelines for typography, color, and theme creation.
  • Composition, Motion, & Accessibility: Provides guidelines for layout, animation, and accessibility.
  • Litmus Checks & Visual Verification: Ensures design integrity before finalizing.

Quick Start

Use the ce-frontend-design skill to create a landing page with a distinct design style.

Frequently Asked Questions about ce-frontend-design

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

FAQPage Schema
How do I create a frontend interface that doesn't look AI-generated?

To create distinctive frontend interfaces, you need a design process that assesses existing signals, plans intentionally, and verifies visual integrity. This ensures production-grade UI quality while avoiding generic AI aesthetics.

What's the best way to build a landing page with high-quality UI design?

The best way to build a landing page with high-quality UI design is to follow a full lifecycle process: detect existing design systems, plan the layout, construct with intention, and verify the final composition visually.

Can I adapt frontend design to match my existing design system?

Yes, you can adapt frontend design to match your existing design system by assessing current design signals and contextual instructions before planning and building the interface.

Does frontend design cover accessibility and motion guidelines?

Yes, frontend design covers accessibility and motion guidelines. It provides specific rules for composition, animation, and accessibility to ensure the final user experience is functional and inclusive.

How does visual verification work for frontend design?

Visual verification for frontend design works by running litmus checks during the final stage. This process verifies typography, color, and composition to ensure design integrity before the interface is finalized.

When do I need production-grade frontend design guidelines?

You need production-grade frontend design guidelines when building distinctive user interfaces that require strict rules for typography, color, composition, motion, and accessibility to ensure genuine design quality.