sj-design

What problem does it solve?

This Skill solves the common pain point of generic, AI-generated web designs that look like generic templates and fail to match a brand's unique visual identity, eliminating hours of manual tweaking to achieve a professional, on-brand result.

Core Features & Use Cases

• Reference DNA Extraction: Pulls exact brand design tokens (hex color codes, font pairs, spacing units, layout patterns) from local brand design systems or provided URLs, including screenshot capture and analysis for web references to ensure accurate brand matching.
• 3-Variant Design Workflow: Generates 3 distinct, self-contained wireframe HTML design variants (dynamic, restrained, balanced) for user selection before any full implementation work begins, ensuring the final design direction aligns with your vision.
• Persistent Preference & Rejection System: Automatically records approved design directions and permanently bans rejected ones, selecting contrasting alternatives for future iterations to avoid repeating unwanted styles.
• Use Case: For example, if you need to design a new product landing page, provide a reference brand URL, and the skill will generate 3 on-brand wireframe options for you to review and select from before full code implementation.

Quick Start

Use the sj-design skill to generate 3 wireframe design variants for a new checkout page using Stripe's brand design as reference.