More screenshots
Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsDesignForge — AI Design Intelligence Skill for Coding Agents
⚡ DESIGNFORGE PRO v4.1 Turn your coding agent into a design-first engineer.
Free
DesignForge — AI Design Intelligence Skill for Coding Agents
Example session with this skill installed
Audit my current dashboard UI in /src/components/dashboard and propose 3 specific improvements to hierarchy and accessibility.
- Read your context and instructions
- Compiled the designforge
- Generated the design tokens stylesheet
I have audited the dashboard components in /src/components/dashboard. The current implementation relies on hardcoded spacing and lacks proper ARIA labels on the data visualization widgets.
Dashboard Design Audit
| Component | Issue Identified | Impact | Recommendation |
|---|---|---|---|
| StatCards | Low contrast ratio (3.2:1) on secondary labels. | Accessibility | Update to text-slate-600 to meet WCAG AA standards. |
| MainGrid | Z-pattern hierarchy is broken by oversized header icons. | Cognitive Load | Reduce icon scale from 2rem to 1.25rem; use weight for emphasis instead. |
| DataChart | Missing keyboard navigation and screen reader descriptions. | Operability | Implement aria-labelledby and a hidden summary table for screen readers. |
Proposed Design Tokens
{
"colors": {
"text": {
"primary": "#0f172a",
"secondary": "#475569",
"muted": "#64748b"
}
},
"spacing": {
"card-gap": "1.5rem",
"section-padding": "2rem"
}
}
Next steps
- Apply the contrast fixes to the
StatCardscomponent. - Refactor
MainGridto use the updated spacing tokens. - Add ARIA live regions to the
DataChartstreaming states.
designforge-ai-design-intelligence-skill-tokens.css
CSS · design tokens
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Turn your coding agent into a design-first engineer.
DesignForge gives AI coding agents a structured design intelligence workflow for planning, building, auditing and refining polished digital products — without relying on generic “make it modern” prompts.
🎨 About DesignForge
DesignForge is a design intelligence skill for coding agents. It helps an agent understand the product and existing codebase before making design decisions, then guides it through system creation, implementation, visual inspection, critique and refinement.
Instead of treating design as something added after coding, DesignForge makes design part of the entire engineering workflow.
⚙️ The DesignForge Workflow
🧭 Understand → 🏗️ Architect → 🎨 Design → 🧩 Systemize → 💻 Build → 🔍 Inspect → 🧪 Critique → 🚀 Refine → 🧠 Learn
🔥 What makes DesignForge Pro different?
DesignForge Pro combines design reasoning, implementation guidance and quality control into one repeatable workflow.
🧠 Adaptive Memory & Self-Healing
Learns useful project patterns, rejected design decisions and recurring problems, helping future work become more consistent and reducing repeated mistakes.
🚫 Anti-Generic Design
Helps identify predictable AI-generated patterns such as repetitive card layouts, unnecessary gradients, weak hierarchy and other generic visual decisions.
📊 Dashboard-First Delivery
Design audits, critiques, scorecards and handoffs can be presented as polished, self-contained HTML dashboards instead of long blocks of plain text.
🔍 Visual & UX Quality Assurance
Encourages structured checks for hierarchy, spacing, responsive behavior, accessibility, UI states, consistency and overall product quality.
🧩 Design System Intelligence
Creates reusable design tokens, typography rules, spacing systems, components and interaction patterns instead of one-off screens.
🛡️ Host-Isolation Principles
Includes clear operational boundaries for working safely with project files and host environments.
🎯 What can you use it for?
DesignForge is useful across the full product interface lifecycle:
🚀 SaaS Products — dashboards, workflows and settings
🤖 AI Products — generation, streaming and result states
🌐 Landing Pages — polished product and marketing interfaces
📊 Data Products — analytics, charts and information-dense UI
🧩 Design Systems — reusable tokens and components
🔎 UI Audits — critique, scoring and improvement recommendations
📦 What you get
The DesignForge Pro package includes the core skill plus supporting resources for a complete design-intelligence workflow.
📘 Core SKILL.md
Main orchestration, rules and activation workflow.
🧠 Adaptive Memory System
Project-aware learning and reusable design lessons.
🎨 Design References
Design principles, visual rules, UX guidance and quality standards.
📊 HTML Dashboard Templates
Professional layouts for audits, critiques and design reports.
🧪 QA & Validation Tools
Supporting checks for quality and design consistency.
🧩 Design Templates
Reusable structures for tokens, systems and project context.
📚 Worked Examples
Practical examples for modern product interfaces.
🤝 Built for coding-agent workflows
Designed for compatible SKILL.md-based coding-agent environments and existing project stacks.
Common stacks: React · Next.js · Tailwind CSS · shadcn/ui · MUI · Chakra UI · Custom CSS
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 14 days ago
- Free to download with an account