Generates three on-brand wireframe HTML design variants from reference URLs or brand design systems.
npx skills add https://github.com/s0613/S-skills --skill sj-design
Please help me install this Agent Skill. Skill: sj-design Source: https://github.com/s0613/S-skills/tree/main/skills/sj-design Command: npx skills add https://github.com/s0613/S-skills --skill sj-design
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.
Use the sj-design skill to generate 3 wireframe design variants for a new checkout page using Stripe's brand design as reference.
High-intent search queries and answers about installing and using this skill.
To generate on-brand UI designs and avoid generic templates, provide a local brand design system or reference URL. The tool extracts exact design tokens like hex codes and font pairs to produce wireframe variants matching your brand identity.
Yes, you can extract design tokens from a reference URL screenshot. The skill captures and analyzes web references to pull exact brand visual identity elements, including layout patterns, spacing units, and color codes for accurate brand matching.
To get design variant options before full web page implementation, the skill generates three distinct self-contained wireframe HTML variants: dynamic, restrained, and balanced. You review and select your preferred design direction before any final coding work begins.
Yes, the wireframe generation tool remembers approved and rejected design directions. It features a persistent preference system that permanently bans rejected styles and automatically selects contrasting alternatives for future iterations to avoid repeating unwanted patterns.
The best way to design a landing page using an existing brand's visual style is to input the brand's reference URL. The system extracts the reference DNA to generate three on-brand wireframe options for your review and selection before full implementation.
Oruga420Generate brand-specific DESIGN.md files with full design tokens for frontend generation.
nexu-ioGenerates a self-contained HTML wireframe with inline CSS and hand-drawn styling.
dev-mirzabicerTranslate design briefs into production-ready frontend UI components.
Daiwik-ChilukuriGenerate production-grade frontend interfaces with context-driven design directives.
