TypingMindTypingMindThe best frontend for AI
Design On logo

Design On

Community
linkonai2026-kr
design-on

한 문장 요청에서 완성된 웹페이지를 만든다. 컬러 팔레트 93세트·서체 페어링·업종별 사진 레시피를 내장하고, 제작 4트랙·검수 3트랙을 병렬로 돌린 뒤 안티패턴 디텍터로 AI 티를 기계 검사한다. 완성 후에는 상호명·전화번호 같은 실제 정보를 직접 물어 채우고 사진 교체 여부를 확인한다. "카페 사이트 만들어줘", "필라테스 스튜디오 페이지", "세무사무소 홈페이지" 같은 웹페이지·랜딩페이지 제작 요청에 쓴다. 색상 팔레트 추천이나 업종별 디자인 툴 조회에도 쓴다.

Overview

Publisherlinkonai2026-kr
Repositorydesign-on
Skill namedesign-on
Stars
11
Forks
3
Bundled files
47
LicenseMIT
Links
Skill sourceRepositoryHomepage
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 47 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by linkonai2026-kr on GitHub. Read the source before you install it.

Installation

Install the Design On AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/linkonai2026-kr/design-on/tree/master
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/linkonai2026-kr/design-on.git \
  .claude/skills/design-on
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Design On in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Design On on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Design On is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

design-on

사용자가 업종과 원하는 느낌을 한 문장으로 말하면, 컬러·서체·사진·카피를 전부 정해서 10년차 디자이너가 만든 것 같은 웹페이지를 만든다. 단일 HTML이 기본이고, 요청하거나 내용이 많으면 멀티페이지로, 상태가 얽힌 화면이면 React로 간다.

만들고 끝내지 않는다. 마음에 드는지 묻고, 상호명·전화번호 같은 실제 정보를 받아 채우고, 사진을 하나씩 확인하는 STEP 8까지가 완성이다.

실행 방법

이 스킬 디렉토리의 PLAYBOOK.md를 읽고 그 절차를 그대로 따른다. 전체 방법론이 거기 있다.

{이 스킬 폴더}/PLAYBOOK.md

흐름

STEP 1  브리프 해석 + 출력 형태 판단 + 팔레트 조회 → 질문 딱 1회
STEP 2  아트 디렉션 확정 (구조 · 모드 · 3다이얼 · 팔레트 역할 · 서체 페어링)
STEP 3  ⚡병렬 제작 4트랙   리서치 · 카피 · 사진 · 모션
STEP 4  통합 빌드 (단일 HTML · 멀티페이지 · React)
STEP 5  ⚡병렬 검수 3트랙   기계검사 · 크래프트 · 한국어
STEP 6  일괄 수정 → 재검사 1회
STEP 7  보고 → 화면을 보여준다
STEP 8  완성 후 대화 (만족도 → 실제 정보 채우기 → 사진 교체)

핵심 원칙

  • 질문은 딱 한 번, 묶어서. 팔레트 DB를 먼저 조회한 근거로 3개 이하를 묻는다. 답을 받으면 끝까지 만든다.
  • 구조를 먼저 고른다. pick.mjs layouts로 아키텍처 10종 중 하나를 고르고 이유를 한 줄로 쓴다. 색만 바꾸고 구조는 늘 똑같이 만드는 것이 가장 큰 실패 모드다. 치수도 아키텍처에서 가져온다.
  • AI 티는 기계로 잡는다. node scripts/slopcheck.mjs site/를 반드시 돌린다. 자기 판단에 맡기면 늘 통과시킨다.
  • 브리프가 이긴다. 사용자가 보라색을 요청하면 디텍터의 ai-color-palette 경고보다 요청이 우선이다.
  • 서체는 페어링한다. 한 서체 단독은 single-font로 잡힌다.
  • 크림·베이지 배경으로 도망치지 않는다. cream-palette로 잡힌다. 배경은 팔레트에서 유래해야 한다.
  • 원페이지가 기본이지만 고집하지 않는다. 사용자가 요청하거나 내용이 많으면 3~5개로 나눈다. 멀티페이지일 때는 CSS를 파일 하나로 뽑아 공유하고 헤더·푸터를 동일하게 한다.
  • 검수 루프를 돌지 않는다. 일괄 수정 후 재검사 1회로 끝낸다.
  • 하지만 STEP 8에서 사람에게는 묻는다. 자가 QA 루프와 사용자 확인은 다르다. STEP 7까지는 상호명·전화번호가 전부 지어낸 값이라 아직 완성이 아니다. 만족도를 묻고, 실제 정보를 받아 채우고, 사진을 하나씩 확인한다. 최대 2라운드.

내장 자산

data/*.json을 Read로 통째 읽지 마라. scripts/pick.mjs로 조회한다. tools.json 하나가 약 87,000 토큰이라 한 번 읽으면 세션 예산이 사라진다.

조회내용
pick.mjs layouts페이지 구조 아키텍처 10종. 치수까지 서로 다르다
pick.mjs palettes컬러 팔레트 93세트. 역할 배정과 대비 계산까지 끝내서 준다
pick.mjs fonts서체 페어링 9종 (한글 본문 + 한글 제목 + Fontshare 라틴)
pick.mjs photo업종별 사진 프롬프트 레시피 7종
pick.mjs tools디자인 툴·사이트 894개
경로내용
vendor/impeccable/품질 하한선 + 안티패턴 디텍터 59종 (Apache-2.0, pbakaus)
vendor/taste-skill/브리프 추론 + 3다이얼 + 디자인시스템 매핑 (MIT, Leonxlnx)
vendor/ui-skills/컴포넌트·타이포·모션 제약 (MIT, Julien Thibeaut)
vendor/emil-skill/애니메이션 설계·검수 (MIT, Emil Kowalski)

출처와 라이선스는 CREDITS.md에 있다.

외부 스킬

lazyweb, originkit MCP가 설치돼 있으면 자동으로 위임한다. 없으면 조용히 건너뛴다. 설치를 요구하며 멈추지 않는다.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Design On AI skill do?

한 문장 요청에서 완성된 웹페이지를 만든다. 컬러 팔레트 93세트·서체 페어링·업종별 사진 레시피를 내장하고, 제작 4트랙·검수 3트랙을 병렬로 돌린 뒤 안티패턴 디텍터로 AI 티를 기계 검사한다. 완성 후에는 상호명·전화번호 같은 실제 정보를 직접 물어 채우고 사진 교체 여부를 확인한다. "카페 사이트 만들어줘", "필라테스 스튜디오 페이지", "세무사무소 홈페이지" 같은 웹페이지·랜딩페이지 제작 요청에 쓴다. 색상 팔레트 추천이나 업종별 디자인 툴 조회에도 쓴다.

Why use Design On on TypingMind?

Because you install it once and use it with any model. Design On is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Design On in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/linkonai2026-kr/design-on/tree/master. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Design On?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Design On?

As many as you like. As long as a model supports skills, you can use Design On with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Design On AI skill free?

Yes. It is published on GitHub by linkonai2026-kr under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
NousResearch logo

Mono Color

NousResearch
OrganizationPopular

Generate one- or two-ink editorial print poster images.

53.5K
250.4K
9 files
View
NousResearch logo

Pretext

NousResearch
OrganizationPopular

Build creative browser demos with DOM-free text layout.

53.5K
250.4K
3 files
View
NousResearch logo

Sketch

NousResearch
OrganizationPopular

Throwaway HTML mockups: 2-3 design variants to compare.

53.5K
250.4K
Instructions
View
NousResearch logo

Tldraw Offline

NousResearch
OrganizationPopular

Drive and script tldraw offline canvases with an agent.

53.5K
250.4K
3 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇