diff --git a/docs/blog/images/screenshot-driven-development-blog/brutalism-calendar.png b/docs/blog/images/screenshot-driven-development-blog/brutalism-calendar.png new file mode 100644 index 00000000..f4667bac Binary files /dev/null and b/docs/blog/images/screenshot-driven-development-blog/brutalism-calendar.png differ diff --git a/docs/blog/images/screenshot-driven-development-blog/claymorphism-calendar.png b/docs/blog/images/screenshot-driven-development-blog/claymorphism-calendar.png new file mode 100644 index 00000000..9d78d228 Binary files /dev/null and b/docs/blog/images/screenshot-driven-development-blog/claymorphism-calendar.png differ diff --git a/docs/blog/images/screenshot-driven-development-blog/glassmorphism-calendar.png b/docs/blog/images/screenshot-driven-development-blog/glassmorphism-calendar.png new file mode 100644 index 00000000..3a3f252f Binary files /dev/null and b/docs/blog/images/screenshot-driven-development-blog/glassmorphism-calendar.png differ diff --git a/docs/blog/images/screenshot-driven-development-blog/goose-prototypes-calendar.png b/docs/blog/images/screenshot-driven-development-blog/goose-prototypes-calendar.png new file mode 100644 index 00000000..3a127dfb Binary files /dev/null and b/docs/blog/images/screenshot-driven-development-blog/goose-prototypes-calendar.png differ diff --git a/docs/blog/images/screenshot-driven-development-blog/neumorphism-calendar.png b/docs/blog/images/screenshot-driven-development-blog/neumorphism-calendar.png new file mode 100644 index 00000000..405fd190 Binary files /dev/null and b/docs/blog/images/screenshot-driven-development-blog/neumorphism-calendar.png differ diff --git a/docs/blog/images/screenshot-driven-development-blog/screenshot-calendar-og.png b/docs/blog/images/screenshot-driven-development-blog/screenshot-calendar-og.png new file mode 100644 index 00000000..82e6f8e8 Binary files /dev/null and b/docs/blog/images/screenshot-driven-development-blog/screenshot-calendar-og.png differ diff --git a/docs/blog/images/screenshot-driven-development-blog/screenshot-driven-development.png b/docs/blog/images/screenshot-driven-development-blog/screenshot-driven-development.png new file mode 100644 index 00000000..13051aca Binary files /dev/null and b/docs/blog/images/screenshot-driven-development-blog/screenshot-driven-development.png differ diff --git a/docs/blog/posts/2024-11-22-screenshot-driven-development.md b/docs/blog/posts/2024-11-22-screenshot-driven-development.md new file mode 100644 index 00000000..0360410d --- /dev/null +++ b/docs/blog/posts/2024-11-22-screenshot-driven-development.md @@ -0,0 +1,280 @@ +--- +draft: false +title: "Screenshot-Driven Development" +date: 2024-11-22 +authors: + - rizel +categories: + - Web Development +--- +![calendar](../images/screenshot-driven-development-blog/screenshot-driven-development.png) + +I'm a developer at heart, so when I'm working on a personal project, the hardest part isn't writing code—it's making design decisions. I recently built a calendar user interface. I wanted to enhance its visual appeal, so I researched UI design trends like "glassmorphism" and "claymorphism." + +However, I didn't want to spend hours implementing the CSS for each design trend, so I developed a faster approach: screenshot-driven development. I used an open source developer agent called [Goose](https://github.com/block/goose) to transform my user interfaces quickly. + + + +### My original calendar: +![calendar](../images/screenshot-driven-development-blog/screenshot-calendar-og.png) + +### Goose prototyped the designs below: +![Goose prototypes](../images/screenshot-driven-development-blog/goose-prototypes-calendar.png) + +In this blog post, I'll show you how to quickly prototype design styles by letting Goose handle the CSS for you. +>💡 Note: Your results might look different from my examples - that's part of the fun of generative AI! Each run can produce unique variations of these design trends. + +## Get Started with Screenshot-Driven Development + +### Step 1: Create your UI +Let's create a basic UI to experiment with. Create an index.html file with the code below: + +
+Create an index.html file with the code below + +```html + + + + + + +
+
+
November 2024
+
+
+ Sun + Mon + Tue + Wed + Thu + Fri + Sat +
+
+
27
+
28
+
29
+
30
+
31
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
+
+ + +``` +
+ +Once saved, open the file in your browser. You should see a calendar! + +### Step 2: Install Goose + +```bash +brew install pipx +pipx ensurepath +pipx install goose-ai +``` + +### Step 3: Start a session + +```bash +goose session start +``` + +#### Bring your own LLM + +>Goose will prompt you to set up your API key when you first run this command. You can use various LLM providers like OpenAI or Anthropic + +```bash +export OPENAI_API_KEY=your_api_key +# Or for other providers: +export ANTHROPIC_API_KEY=your_api_key +``` + +### Step 4: Enable the Screen toolkit +Goose uses [toolkits](https://block.github.io/goose/plugins/plugins.html) to extend its capabilities. The [screen](https://block.github.io/goose/plugins/available-toolkits.html#6-screen-toolkit) toolkit lets Goose take and analyze screenshots. + +To enable the Screen toolkit, add it to your Goose profile at ~/.config/goose/profiles.yaml. + +> Your configuration might look slightly different depending on your LLM provider preferences. + + +```yaml +default: + provider: openai + processor: gpt-4o + accelerator: gpt-4o-mini + moderator: truncate + toolkits: + - name: developer + requires: {} + - name: screen + requires: {} +``` + +### Step 5: Prompt Goose to screenshot your UI +Goose analyzes your UI through screenshots to understand its structure and elements. In your Gooses session, prompt Goose to take a screenshot by specifying which display your UI is on: + +```bash +Take a screenshot of display(1) +``` + +> The display number is required - use display(1) for your main monitor or display(2) for a secondary monitor. + +Upon success, Goose will run a `screencapture` command and save it as a temporary file. + +### Step 6: Prompt Goose to transform your UI + +Now, you can ask Goose to apply different design styles. Here are some of the prompts I gave Goose and the results it produced: + +#### Glassmorphism + +```bash +Apply a glassmorphic effect to my UI +``` + +![glassmorphism](../images/screenshot-driven-development-blog/glassmorphism-calendar.png) + + +#### Neumorphism + +```bash +Apply neumorphic effects to my calendar and the dates +``` + +![neumorphism](../images/screenshot-driven-development-blog/neumorphism-calendar.png) + + +#### Claymorphism + +```bash +Please replace with a claymorphic effect +``` + +![claymorphism](../images/screenshot-driven-development-blog/claymorphism-calendar.png) + + +#### Brutalism + +```bash +Apply a brutalist effect please +``` + +![brutalism](../images/screenshot-driven-development-blog/brutalism-calendar.png) + +## Learn More + +Developing user interfaces is a blend of creativity and problem-solving. And I love that using Goose gives me more time to focus on creativity rather than wrestling with CSS for hours. + +Beyond prototyping, Goose's ability to analyze screenshots can help developers identify and resolve UI bugs. + +If you're interested in learning more, check out the [Goose repo](https://github.com/block/goose) and join our [Discord community](https://discord.gg/block-opensource). \ No newline at end of file