skills.rest
sunilaicoe
sunilaicoeCOMMUNITY
Explore all skills by this author →
GitHub

Brand Style Guide Agent Skill

Generate HTML mockups implementing cohesive UI designs from a design system.

Updated Apr 28, 2026
Search Tags:#html#accessibility#prototyping#ui design#responsive#mockup
One-click install
npx skills add https://github.com/sunilaicoe/genesis-core --skill brand-style-guide-agent-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Brand Style Guide Agent Skill
Source: https://github.com/sunilaicoe/genesis-core/tree/main/convex/skills/aicoe-style-guide
Command: npx skills add https://github.com/sunilaicoe/genesis-core --skill brand-style-guide-agent-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation of high-fidelity UI mockups that adhere to a comprehensive design system, ensuring visual consistency and accessibility across digital products.

Core Features & Use Cases

  • Design System Implementation: Generates mockup HTML structure using a predefined CSS framework aligned with brand guidelines.
  • Component Layouts: Constructs common UI patterns like buttons, cards, grids, navigation, and data tables based on specified standards.
  • Use Case: A designer needs to quickly produce a prototype page with standardized components, colors, and responsive layout for client review.

Quick Start

Use this skill to generate a complete HTML mockup of a landing page with navigation, hero section, and footer following the AICOE design system.

Frequently Asked Questions about Brand Style Guide Agent Skill

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

FAQPage Schema
How do I generate accessible HTML mockups for a brand design system?▼

To generate accessible HTML mockups, this Skill produces template structures using a predefined CSS framework aligned with your brand guidelines. It ensures visual consistency and compliance with accessibility and responsiveness standards for digital product development.

Can I quickly prototype responsive UI components like data tables and navigation?▼

Yes, you can quickly prototype responsive UI components. The Skill constructs common UI patterns like buttons, cards, grids, navigation, and data tables based on specified standards to support fast prototyping and visual consistency.

What is the best way to create consistent landing page mockups for client review?▼

The best way to create consistent landing page mockups is by generating a complete HTML structure with navigation, hero sections, and footers. This approach implements a cohesive UI design rapidly, making it suitable for client reviews.

Does this UI design approach require predefined brand guidelines to work?▼

Yes, implementing this UI design approach requires predefined brand guidelines. The Skill uses a specified design system to ensure the generated mockup HTML templates maintain strict visual consistency and brand alignment across all components.

Are there limitations when using HTML mockups for high-fidelity prototyping?▼

A limitation of using HTML mockups for high-fidelity prototyping is that the Skill provides basic structural implementation depth. While it ensures accessibility and responsive layouts, complex interactive logic may require additional frontend development.

Related Skills

Explore More Design & Creative Skills→
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate
SoftSystemsStudioSoftSystemsStudio

web-artifacts-builder

Bundle React and Vite projects into self-contained HTML artifacts.

Community
Intermediate
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
Sir-chawakornSir-chawakorn
9

implement-from-design

Translate Figma designs into React and Tailwind CSS components with visual-diff verification.

Community
Advanced