mirise-design

Consolidate MIRISE design tokens, logos, and templates into a reusable design system.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/AllenZhou/MIRISE --skill mirise-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mirise-design
Source: https://github.com/AllenZhou/MIRISE/tree/main/docs/superpowers/specs/2026-04-25-claude-design-output/project
Command: npx skills add https://github.com/AllenZhou/MIRISE --skill mirise-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a consolidated MIRISE design system and UI kit, including tokens, brand assets, and component references to support rapid prototyping and production design.

Core Features & Use Cases

  • Design tokens and guidelines: colors, typography, spacing, radii, shadows, and governance rules captured in CSS tokens and JSON.
  • Brand assets & iconography: official logos, brand images, and iconography guidance with Lucide substitution.
  • UI kit & templates: modular site components, decks, and templates in ui_kits/website, deck assets, and wechat templates for rapid mockups.
  • Guidance for production: voice, visual foundations, and caveats to ensure brand consistency in outputs.

Quick Start

Create a MIRISE-branded UI mockup by applying the design tokens from colors_and_type.css to a sample page using assets/logos and the UI kit references.

Frequently Asked Questions about mirise-design

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

FAQPage Schema
How do I create brand-consistent UI mockups using a design token system?

Brand-consistent UI mockups are created by applying predefined design tokens for colors, typography, spacing, radii, and shadows from CSS and JSON files to your interfaces. This enforces visual governance across all generated mockups.

What design assets are included in a standard UI kit for rapid prototyping?

A standard UI kit for rapid prototyping includes modular site components, presentation deck assets, and WeChat templates. It also provides official logos, brand images, and iconography guidance with Lucide substitutions.

Can I use these design tokens and guidelines for marketing pages and presentations?

Yes, these design tokens and guidelines can be used for marketing pages, presentations, and PDFs. The system supplies modular templates and component references to support rapid prototyping and production design across these formats.

How do I enforce a fixed color palette and typography stack across different web components?

A fixed color palette and typography stack are enforced by applying governance rules defined in the design system repository. Consolidated CSS tokens and JSON files lock these visual foundations for all code-ready components.

What is the best way to manage brand guidelines and visual foundations for production design?

The best way to manage brand guidelines is to consolidate them into a reusable design system with fixed tokens, voice guidance, and caveats. This ensures brand consistency and provides component references for production outputs.

Do I need specific icon substitution rules when applying brand assets to interfaces?

Specific icon substitution rules are needed when applying brand assets. The system provides iconography guidance specifying Lucide substitutions to maintain visual consistency within the established UI kit and brand guidelines.