skills.rest
laionazeredo
laionazeredoCOMMUNITY
Explore all skills by this author →
GitHub

che-social-ui-designer

Orchestrates spec-gated design pipelines for social media, UI/UX, design systems, and branding.

Updated May 12, 2026
Search Tags:#design system#figma#tailwind#design orchestration#social media design#openpencil#logo branding
One-click install
npx skills add https://github.com/laionazeredo/che-ai --skill che-social-ui-designer-laionazeredo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: che-social-ui-designer
Source: https://github.com/laionazeredo/che-ai/tree/main/skills/che-social-ui-designer
Command: npx skills add https://github.com/laionazeredo/che-ai --skill che-social-ui-designer-laionazeredo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Design work with AI agents often skips specification, producing inconsistent visuals, wrong colors, and unverifiable outputs. This Skill enforces a mandatory spec-approval gate and staged execution with visual review so every deliverable matches an approved specification before pixels are drawn. ## Core Features & Use Cases - Four design modes: Social media posts (A), UI/UX feature design with React/Tailwind 4 dev-specs (B), Tailwind 4 design systems with tokens and 12 atomic components (C), and logo & branding with mandatory SVG variants and a full brandbook (D). - Backend-neutral execution: Routes work to OpenPencil, Figma, or spec-only output via a fail-closed backend contract, never silently converting between engines. - Quality gates: WCAG AA contrast checks, unique-color image validation, 2x exports, semantic layer naming, and pure-vector SVG validation for logos. - Use Case: Ask for an Instagram carousel for a bakery; the Skill writes a per-piece spec (verbatim copy, hex palette, layout grid), waits for your explicit approval, then executes staged photo, text, and export steps with a visual revisor validating each stage. ## Quick Start Ask the agent to design a set of four Instagram posts for your brand using /che-design, then approve the generated spec to begin staged execution.

Frequently Asked Questions about che-social-ui-designer

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

FAQPage Schema
How do I create social media posts with an AI design agent?▼

Trigger the skill with /che-design and choose Mode A. It writes a per-piece spec covering verbatim copy, hex palette, layout grid, and image sources, waits for your explicit approval, then executes staged photo, text, and 2x export steps with visual review after each stage.

How do I generate a logo and brandbook with SVG output?▼

Choose Mode D (Logo & Branding). The skill runs five discovery question batches, produces three low-fidelity concepts, refines one into pure vectors, and exports at least six standalone SVG variants plus a six-section brandbook with palette, typography, mockups, and do/don't rules.

Does this design skill work with Figma or only OpenPencil?▼

Both. A backend contract resolves the design source to OpenPencil, Figma, or spec-only execution. Figma sources are never converted to OpenPencil and vice versa; mismatched requests fail closed with a reported reason instead of silent conversion.

Can it export design tokens for Tailwind CSS?▼

Yes. Mode C creates a two-mode (light/dark) variable collection with roughly 60 semantic tokens and 12 atomic components, then exports tokens in three formats: Tailwind config, CSS, and DTCG JSON. Mode B also emits a pasteable Tailwind dev-spec.

What happens if image generation or headless rendering fails?▼

The skill follows a fixed fallback cascade: real Unsplash photo URLs, a text-to-image endpoint with placeholder validation, OpenPencil stock photos, and finally a Pillow/ImageMagick offline compositor that guarantees delivery without opening a desktop GUI.

Why does the skill require spec approval before designing?▼

The spec gate is a hard precondition: no pixels are drawn until the user explicitly approves a structured spec covering copy, palette, layout, and typography. This prevents wasted stages and gives the visual revisor a locked checksum to validate every output against.

Related Skills

Explore More Design & Creative Skills→
droppiidroppii

ck:copywriting

Generate copywriting formulas, templates, and styles for headlines, emails, and landing pages.

Official
Intermediate
PMDevSolutionsPMDevSolutions
7

indesign-conversion

Convert InDesign IDML and PDF files into typed React components and design tokens.

Official
Advanced
lukaskellersteinlukaskellerstein
3

design-system

Generate color palettes, type scales, and audit design systems for WCAG contrast compliance.

Community
Intermediate
AO-Cyber-SystemsAO-Cyber-Systems

df:quick

Execute ad-hoc tasks with atomic commits and STATE.md updates.

Official
Intermediate