KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #developer-tools #claude-code #codex #cli #agent-skills #ai #dsh-plugin #mcp #windows #agent

ai-design-framework

★ 1 Open GitHub ↗

An open-source AI Design Framework for creating world-class digital products with Claude Code, ChatGPT, Codex, Cursor, Windsurf, Webflow MCP, Figma MCP, and more.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ADF — AI Design Framework

> **Design once. Build anywhere.**

An open-source framework for using AI to create thoughtful, production-ready digital products—from research and UX to UI, Webflow, Figma, and frontend development.

ADF gives AI assistants a shared foundation of design knowledge, specialist roles, reusable commands, platform adapters, and a quality-review system.

## What is ADF?

AI can move quickly, but speed alone does not create a good product. ADF helps turn an AI conversation or coding session into a disciplined product workflow:

- Start with user evidence instead of assumptions.
- Design the flow before implementing it.
- Build with accessible, responsive, maintainable patterns.
- Review work against transparent quality standards.

The framework is tool-neutral at its core, so the same principles work across different AI environments.

## Supported platforms

| Platform | Adapter |
| --- | --- |
| Claude Code | [View adapter](adapters/claude/) |
| Codex CLI | [View adapter](adapters/codex/) |
| ChatGPT | [View adapter](adapters/chatgpt/) |
| Cursor | [View adapter](adapters/cursor/) |
| Windsurf | [View adapter](adapters/windsurf/) |
| Cline | [View adapter](adapters/cline/) |
| Webflow MCP | [View adapter](adapters/webflow-mcp/) |
| Figma MCP | [View adapter](adapters/figma-mcp/) |

## Quick start — your first useful result

You can use ADF today without installing anything.

1. Clone the repository and open it in your preferred AI environment.

```bash
   git clone https://github.com/tehseenullah92/ai-design-framework.git
   cd ai-design-framework
   ```

2. Read the [ADF Principles](shared/adf-principles.md) and choose a task from [Commands](commands/).

3. For a first research task, paste this into your AI assistant:

```text
   Use the ADF /research command and the Researcher role.
   My product or feature is: [describe it].
   The decision I need to make is: [describe it].
   Create a focused research plan, identify assumptions, and recommend the next step.
   ```

4. Use the resulting plan to move into [`/design`](commands/design.md), then run a structured [`/review`](commands/review.md) with the [ADF Score™](reviewers/adf-score.md).

That is the ADF loop: **research → design → build → review → improve**.

## Architecture

Read the full [ADF Architecture](ARCHITECTURE.md) for layer responsibilities and dependency rules.

```text
Knowledge
    ↓
Roles
    ↓
Commands
    ↓
Workflows
    ↓
Review + ADF Score™
    ↓
Platform adapters
```

| Layer | What it provides |
| --- | --- |
| [Knowledge](knowledge/) | Shared guidance for design, accessibility, performance, SEO, content, and more. |
| [Roles](roles/) | Specialist lenses such as researcher, product designer, accessibility specialist, and reviewer. |
| [Commands](commands/) | Repeatable playbooks for research, design, review, build, and other common tasks. |
| [Workflows](workflows/) | End-to-end processes that combine roles and commands. |
| [Reviewers](reviewers/) | Quality criteria, including the 100-point ADF Score™. |
| [Adapters](adapters/) | Platform-specific instructions that apply the same framework to each AI environment. |

## ADF Principles

Every part of ADF follows its [constitution](shared/adf-principles.md):

1. Research before design.
2. Design before implementation.
3. Accessibility is non-negotiable.
4. Performance is a feature.
5. Components over duplication.
6. Design systems over pages.
7. Consistency over novelty.
8. Review everything.
9. Measure quality.
10. Improve continuously.

## ADF Score™

Every design can be reviewed with the [ADF Score™](reviewers/adf-score.md), a transparent 100-point rubric covering visual design, typography, spacing, accessibility, performance, SEO, maintainability, motion, design systems, and conversion.

Use the [scorecard template](templates/adf-scorecard.md) to capture evidence, priorities, and release gates.

## The future CLI

ADF is currently a framework repository. A small companion CLI is planned to make its workflows executable:

```bash
adf init
adf research
adf design
adf review
adf score
adf build webflow
adf build react
adf build nextjs
```

The CLI will be built only after the framework's workflows have been proven through real use. Follow the [roadmap](ROADMAP.md) for progress.

## Contributing

Read [CONTRIBUTING.md](CONTRIBUTING.md), [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md), and [SECURITY.md](SECURITY.md) before contributing.

## License

ADF is available under the [MIT License](LICENSE).

ai-design-framework

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README