designer

Name: designer
Author: digitalocean-labs

34stars4forks

How to install designer?

digitalocean-labs/do-app-platform-skills/designer

$npx -y skills add digitalocean-labs/do-app-platform-skills --skill designer

Installs into the current project.

Summary

Transform natural language application descriptions into production-ready DigitalOcean App Platform specifications. Use when designing apps, creating app specs, generating deploy.template.yaml, or architecting multi-component applications.

Files · 1

View on GitHub

SKILL.md

1	# App Platform Designer Skill
2
3	Transform natural language descriptions into production-ready App Platform specifications.
4
5	Primary question: "I want to build [description]. What should my App Platform architecture look like?"
6
7	Produces:
8	- `.do/app.yaml` — App Platform specification
9	- `.do/deploy.template.yaml` — Deploy to DO button (public repos)
10	- `.env.example` — Environment variable template
11
12	---
13
14	## Quick Decision
15
16	```
17	What do you need?
18	├── Design new app from description → Workflow 1
19	├── Analyze repo and create spec → Workflow 2
20	├── Add Deploy to DO button → Workflow 3
21	└── Multi-environment setup → Workflow 4
22	```
23
24	---
25
26	## Workflow 1: Natural Language → App Spec
27
28	Trigger: "I need a web app with [description]"
29
30	1. Gather requirements:
31	- What does the app do?
32	- Language/framework?
33	- Database needs?
34	- Background processing?
35
36	2. Decompose into components:
37	- HTTP-facing → `services`
38	- Background processors → `workers`
39	- One-time/scheduled → `jobs`
40	- Static frontends → `static_sites`
41	- Data stores → `databases`
42
43	3. Generate spec with health checks, env vars, routing
44
45	4. Validate: `doctl apps spec validate .do/app.yaml`
46
47	Full guide: See [architecture-patterns.md](reference/architecture-patterns.md)
48
49	---
50
51	## Workflow 2: Analyze Repository → App Spec
52
53	Trigger: "Here's my repo, create an app spec"
54
55	```
56	Check for:
57	├── Dockerfile → Use dockerfile build
58	├── package.json → Node.js app
59	├── requirements.txt / pyproject.toml → Python app
60	├── go.mod → Go app
61	├── Multiple directories with above → Monorepo
62	```
63
64	Full guide: See [component-types.md](reference/component-types.md)
65
66	---
67
68	## Workflow 3: Deploy to DO Button
69
70	Trigger: "Add Deploy to DigitalOcean button"
71
72	Requirements: Public GitHub repository
73
74	1. Create `.do/deploy.template.yaml` (wraps spec in `spec:` key, uses `git:` block)
75	2. Add button to README
76
77	```markdown
78	[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/OWNER/REPO/tree/BRANCH)
79	```
80
81	Full guide: See [deploy-to-do-button.md](reference/deploy-to-do-button.md)
82
83	---
84
85	## Opinionated Defaults
86
87	\| Decision \| Default \| Rationale \|
88	\|----------\|---------\|-----------\|
89	\| Instance size \| `apps-s-1vcpu-1gb` \| Good starting point \|
90	\| Instance count \| 1 \| Start minimal \|
91	\| Database \| Dev database \| Cost-effective \|
92	\| Cache \| Valkey (not Redis) \| Redis is EOL \|
93	\| Build \| Dockerfile if present \| More control \|
94	\| Health check \| `/health` or `/healthz` \| Industry standard \|
95	\| Deploy on push \| `true` \| GitOps workflow \|
96	\| Region \| `nyc` \| Good default \|
97	\| Source format \| `git:` block \| Required for deploy.template.yaml \|
98
99	---
100
101	## Component Summary
102
103	\| Type \| Use Case \| Example \|
104	\|------\|----------\|---------\|
105	\| `services` \| HTTP workloads \| APIs, web apps \|
106	\| `workers` \| Background processing \| Queue consumers, internal APIs \|
107	\| `jobs` \| One-time/scheduled \| Migrations, reports \|
108	\| `static_sites` \| Frontend/docs \| React, Vue, marketing \|
109	\| `databases` \| Data storage \| PostgreSQL, Valkey \|
110
111	Full guide: See [component-types.md](reference/component-types.md)
112
113	---
114
115	## Pattern Selection
116
117	```
118	What are you building?
119	├── Simple app (1 service)? → Pattern 1
120	├── Frontend + API? → Pattern 2
121	├── Need background processing? → Pattern 3
122	├── Monorepo? → Pattern 4
123	└── Complex SaaS? → Pattern 5
124	```
125
126	Full patterns: See [architecture-patterns.md](reference/architecture-patterns.md)
127
128	---
129
130	## Quick Start: Single Service + DB
131
132	```yaml
133	name: my-app
134	region: nyc
135
136	services:
137	- name: web
138	git:
139	repo_clone_url: https://github.com/owner/repo.git
140	branch: main
141	http_port: 8080
142	instance_size_slug: apps-s-1vcpu-1gb
143	health_check:
144	http_path: /health
145	envs:
146	- key: DATABASE_URL
147	scope: RUN_TIME
148	value: ${db.DATABASE_URL}
149
150	databases:
151	- name: db
152	engine: PG
153	production: false
154	```
155
156	---
157
158	## Quick Start: API + Frontend
159
160	```yaml
161	name: fullstack-app
162	region: nyc
163
164	services:
165	- name: api
166	git:
167	repo_clone_url: https://github.com/owner/repo.git
168	branch: main
169	source_dir: /api
170	http_port: 8080
171	health_check:
172	http_path: /health
173	envs:
174	- key: DATABASE_URL
175	scope: RUN_TIME
176	value: ${db.DATABASE_URL}
177
178	static_sites:
179	- name: frontend
180	git:
181	repo_clone_url: https://github.com/owner/repo.git
182	branch: main
183	source_dir: /frontend
184	build_command: npm run build
185	output_dir: dist
186	envs:
187	- key: VITE_API_URL
188	scope: BUILD_TIME
189	value: /api
190
191	databases:
192	- name:

People who liked this also viewed

6 picks

Type

designer

34stars4forks

View on GitHub

How to install designer?

digitalocean-labs/do-app-platform-skills/designer

$npx -y skills add digitalocean-labs/do-app-platform-skills --skill designer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# App Platform Designer Skill
2
3	Transform natural language descriptions into production-ready App Platform specifications.
4
5	Primary question: "I want to build [description]. What should my App Platform architecture look like?"
6
7	Produces:
8	- `.do/app.yaml` — App Platform specification
9	- `.do/deploy.template.yaml` — Deploy to DO button (public repos)
10	- `.env.example` — Environment variable template
11
12	---
13
14	## Quick Decision
15
16	```
17	What do you need?
18	├── Design new app from description → Workflow 1
19	├── Analyze repo and create spec → Workflow 2
20	├── Add Deploy to DO button → Workflow 3
21	└── Multi-environment setup → Workflow 4
22	```
23
24	---
25
26	## Workflow 1: Natural Language → App Spec
27
28	Trigger: "I need a web app with [description]"
29
30	1. Gather requirements:
31	- What does the app do?
32	- Language/framework?
33	- Database needs?
34	- Background processing?
35
36	2. Decompose into components:
37	- HTTP-facing → `services`
38	- Background processors → `workers`
39	- One-time/scheduled → `jobs`
40	- Static frontends → `static_sites`
41	- Data stores → `databases`
42
43	3. Generate spec with health checks, env vars, routing
44
45	4. Validate: `doctl apps spec validate .do/app.yaml`
46
47	Full guide: See [architecture-patterns.md](reference/architecture-patterns.md)
48
49	---
50
51	## Workflow 2: Analyze Repository → App Spec
52
53	Trigger: "Here's my repo, create an app spec"
54
55	```
56	Check for:
57	├── Dockerfile → Use dockerfile build
58	├── package.json → Node.js app
59	├── requirements.txt / pyproject.toml → Python app
60	├── go.mod → Go app
61	├── Multiple directories with above → Monorepo
62	```
63
64	Full guide: See [component-types.md](reference/component-types.md)
65
66	---
67
68	## Workflow 3: Deploy to DO Button
69
70	Trigger: "Add Deploy to DigitalOcean button"
71
72	Requirements: Public GitHub repository
73
74	1. Create `.do/deploy.template.yaml` (wraps spec in `spec:` key, uses `git:` block)
75	2. Add button to README
76
77	```markdown
78	[![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/OWNER/REPO/tree/BRANCH)
79	```
80
81	Full guide: See [deploy-to-do-button.md](reference/deploy-to-do-button.md)
82
83	---
84
85	## Opinionated Defaults
86
87	\| Decision \| Default \| Rationale \|
88	\|----------\|---------\|-----------\|
89	\| Instance size \| `apps-s-1vcpu-1gb` \| Good starting point \|
90	\| Instance count \| 1 \| Start minimal \|
91	\| Database \| Dev database \| Cost-effective \|
92	\| Cache \| Valkey (not Redis) \| Redis is EOL \|
93	\| Build \| Dockerfile if present \| More control \|
94	\| Health check \| `/health` or `/healthz` \| Industry standard \|
95	\| Deploy on push \| `true` \| GitOps workflow \|
96	\| Region \| `nyc` \| Good default \|
97	\| Source format \| `git:` block \| Required for deploy.template.yaml \|
98
99	---
100
101	## Component Summary
102
103	\| Type \| Use Case \| Example \|
104	\|------\|----------\|---------\|
105	\| `services` \| HTTP workloads \| APIs, web apps \|
106	\| `workers` \| Background processing \| Queue consumers, internal APIs \|
107	\| `jobs` \| One-time/scheduled \| Migrations, reports \|
108	\| `static_sites` \| Frontend/docs \| React, Vue, marketing \|
109	\| `databases` \| Data storage \| PostgreSQL, Valkey \|
110
111	Full guide: See [component-types.md](reference/component-types.md)
112
113	---
114
115	## Pattern Selection
116
117	```
118	What are you building?
119	├── Simple app (1 service)? → Pattern 1
120	├── Frontend + API? → Pattern 2
121	├── Need background processing? → Pattern 3
122	├── Monorepo? → Pattern 4
123	└── Complex SaaS? → Pattern 5
124	```
125
126	Full patterns: See [architecture-patterns.md](reference/architecture-patterns.md)
127
128	---
129
130	## Quick Start: Single Service + DB
131
132	```yaml
133	name: my-app
134	region: nyc
135
136	services:
137	- name: web
138	git:
139	repo_clone_url: https://github.com/owner/repo.git
140	branch: main
141	http_port: 8080
142	instance_size_slug: apps-s-1vcpu-1gb
143	health_check:
144	http_path: /health
145	envs:
146	- key: DATABASE_URL
147	scope: RUN_TIME
148	value: ${db.DATABASE_URL}
149
150	databases:
151	- name: db
152	engine: PG
153	production: false
154	```
155
156	---
157
158	## Quick Start: API + Frontend
159
160	```yaml
161	name: fullstack-app
162	region: nyc
163
164	services:
165	- name: api
166	git:
167	repo_clone_url: https://github.com/owner/repo.git
168	branch: main
169	source_dir: /api
170	http_port: 8080
171	health_check:
172	http_path: /health
173	envs:
174	- key: DATABASE_URL
175	scope: RUN_TIME
176	value: ${db.DATABASE_URL}
177
178	static_sites:
179	- name: frontend
180	git:
181	repo_clone_url: https://github.com/owner/repo.git
182	branch: main
183	source_dir: /frontend
184	build_command: npm run build
185	output_dir: dist
186	envs:
187	- key: VITE_API_URL
188	scope: BUILD_TIME
189	value: /api
190
191	databases:
192	- name:

People who liked this also viewed

6 picks

Type