# The Missing Layer: Design Taste in AI Agents Hassan El Mghari AI Engineer World's Fair 2026 [Talk page](https://ai.engineer/talks/7GMKdpLsxwU-missing-layer-design-taste-in-ai-agents) · [Video](https://www.youtube.com/watch?v=7GMKdpLsxwU) ## The Missing Layer: Design Taste in AI Agents Better AI interfaces start with explicit design preferences, concrete visual references, and fast iteration on the first working app. ### How do you stop an agent from shipping an ugly UI? [0:17](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=17s) How do you make an AI app look good when you are not a designer? For [Hassan El Mghari](https://www.nutlope.com/), who introduces himself as Together AI’s developer experience lead, this is a recurring app-building problem. He reports building about ten apps a year for five years, with some reaching millions of users. He credits design and UX as the biggest reason people tried them. The infrastructure behind that work is Together AI: an inference API spanning chat, images, audio, and vision; fine-tuning on customers’ data; and reservable H100 and B200 GPU clusters for training or inference. His model examples include [**GLM 5.2**](https://huggingface.co/zai-org/GLM-5.2) and [**Nano Banana**](https://www.together.ai/models/gemini-flash-image-2-5). The platform’s model catalog includes open-source models, but API availability does not make every offering open source: Nano Banana is Google’s Gemini image model. The apps themselves are usually small: one page, a clear task, and deliberate attention to design and animation. His [LogoCreator](https://github.com/Nutlope/logocreator) demonstration shows a settings sidebar beside six generated logo tiles. Hassan reports that about 85,000 people used the logo creator. A focused interface gives the generated work room to be the product. ![LogoCreator interface with a dark settings sidebar and a grid of six logo tiles.](https://ai.engineer/api/talk-essay-media/f6e6bc5ef7494a7fa0a5eb2c4849ef6ae4d3b01216c80b9272f4a83ff1682909) LogoCreator displays six generated logo designs. The next examples extend that approach beyond a gallery of generated images: - **Make Comics:** Turn the user into a comic-book superhero. At the conference booth, the flow starts with a photo on an iPad and ends with a printed comic to take home. - **Subtitle generation:** Generate subtitles with open-source models for videos destined for YouTube and Twitter. Hassan reports that about 8,000 people checked out the subtitle app. - **Chat:** Provide a straightforward interface to open-source models. - **Landing-page variations:** Generate five or six alternatives, then let the user choose a direction. - **Cloud coding agent:** Accept a GitHub repository, start a sandbox, and create a pull request. These examples range from a single creative task to an agent that changes code, but the interface still needs to make the task and its result clear. ### Turn “looks AI-generated” into specific observations [2:52](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=172s) A working app can still look interchangeable with every other generated app. Hassan’s practical recommendation is to reserve roughly another 10–20% of effort for the UI; he sees that polish as a competitive advantage. The first step is to identify what makes the output feel generic. His examples begin with purple gradient backgrounds, italic headings, a habitual “scroll to explore” instruction, and all-caps pill labels with widely spaced letters. These are concrete choices an agent can change, unlike a request to simply make a page look better. ![Slide titled “Pills with all caps and a dot” shows a landing page, an enlarged circled label, and two letter-spacing examples.](https://ai.engineer/api/talk-essay-media/74ea188c596e62dd792b466f146094d585339f158537f4811bc92867e0e6e4c8) An all-caps pill label illustrates a recurring design pattern. Gradient logos, excessive emojis, inconsistent spacing and padding, and random decorative graphics round out the inventory. None requires a mysterious faculty of taste to describe. Hassan suggests that close inspection could produce a list of twenty or thirty recurring patterns. **Naming the pattern turns an impression into an actionable instruction.** ### Pair design exclusions with positive examples [4:04](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=244s) [Hallmark](https://github.com/Nutlope/hallmark), Hassan’s design skill, packages those observations into reusable context. Its first component is a set of **AI slop gates**: explicit instructions against recurring patterns, such as purple gradients and italic titles. Its second component is a collection of **themes** that gives the agent positive design directions to work from. | Input | What it contributes | |---|---| | Gates | Specific patterns to avoid | | Themes | Concrete directions to build toward | The two inputs solve different problems. Exclusions narrow the space of acceptable output; themes supply inspiration within that space. When Hallmark creates a website, those themes become part of the model’s context. Hassan’s recurring observation is that good visual inspiration improves the result. Hassan reports that more than 10,000 people tried Hallmark within roughly a month and a half of its launch. Its initial emphasis was landing pages: he shows an indie-podcast page, then discusses feedback from the announcement and continued iteration before showing an invoicing-app page. The point of those examples is that the output does not need to repeat the same familiar design tells. He describes the displayed sites as single-prompt generations, then compares a children’s learning page without Hallmark on the left against one with Hallmark on the right. He judges the latter cleaner and nicer, and says it also has more animation, although the static comparison does not demonstrate that motion. A second comparison puts a gradient-heavy baseline beside Hallmark’s output. The improved page is still not perfect; **the skill produces a better starting point for iteration**, rather than removing the need for it. ### Choose a model that makes refinement fast [6:45](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=405s) Once the base exists, the useful unit of work becomes a refinement cycle. Hassan often starts in Codex or Claude Code, then switches to a cheaper open-source model such as GLM 5.2 for iteration. He describes it as newly released two weeks before the talk and, in his assessment, the first open-source model he found very good at design. The relevant requirement is not merely low cost: the model must remain capable enough to make the requested changes well. To make the comparison tangible, he asks the audience to identify which of two landing pages came from GLM 5.2 and which came from [**Opus 4.8**](https://www.anthropic.com/news/claude-opus-4-8). Four hands go up for A, which is the GLM result on the left. Hassan describes the pages as nearly indistinguishable in some respects and says GLM generated its page faster. For this landing-page pair, Hassan reports that the Opus generation cost about five times as much and was slower. The revealed slide labels GLM 5.2 at $0.07 and Opus 4.8 at $0.39, with a heading describing GLM as 5.6× cheaper. Those are costs for the displayed generations; the talk does not supply prompts, token usage, serving conditions, or measured durations. ![Side-by-side hiking landing pages beneath the heading “GLM 5.2 built the left one for 5.6x cheaper,” with model names and dollar amounts below.](https://ai.engineer/api/talk-essay-media/438ebefbfbeb03db37ba3bfe3e48be11be399672cd7af2277943121c6cd3ed75) Two landing pages labeled GLM 5.2, $0.07, and Opus 4.8, $0.39. The next comparison reverses the visual association: Hassan judges the left-hand page more obviously AI-generated, and that one came from Opus. His selection rule is therefore task-specific. A cheaper model that produces sufficiently good design can make repeated refinement more practical than using the expensive model for every change. ### Refine the working image playground [8:21](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=501s) The image-playground demonstration shows what a refinement cycle actually changes. A single prompt to GLM 5.2 produces a working website: enter a prompt and receive an image. That is a meaningful functional base, but Hassan can still see familiar AI design tells in its presentation. Hassan reports that one or two follow-up prompts improved the image playground’s logo, loading states, animations, and spacing. The overall layout stays roughly similar. This is a useful distinction: the next prompt does not have to ask for another app or an entirely new design. It can improve the identity, feedback, and visual rhythm of the app that already works. Loading states are especially consequential because the user experiences the waiting period as part of image generation, not as something outside the product. ### Save the corrections you keep making [9:02](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=542s) The target is an app that looks and feels good, not necessarily the best-designed app in the world. That makes the process accessible to a builder who does not identify as a designer. Start by moving beyond instant recognition—“that looks AI-generated”—to the specific causes: the purple gradient, the logo, or another repeated choice. Once you can name the cause, you can ask the agent to avoid it. Then preserve the preference in a skill, a Markdown file, or `AGENTS.md`. Repeated logo regeneration is a good signal: if you reject the same kind of logo every time, write down both what to avoid and what to do instead. The correction should become an input to the next generation. For the image playground, a small `AGENTS.md` entry could turn those recurring corrections into explicit instructions: ```markdown # Interface preferences - Avoid purple gradient backgrounds and italic page titles. - Use a simple text wordmark instead of a gradient logo. - Keep spacing consistent between the prompt field, action, and result. - Show a clear loading state while an image is being generated. - Preserve the working prompt-to-image flow when refining the design. ``` The file is useful because it records decisions the builder would otherwise have to repeat. Hassan describes accumulating a substantial `AGENTS.md` this way; Hallmark offers a starting collection for someone who has not yet built their own. ### Give the agent something concrete to see and build [10:51](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=651s) **Give agents references and screenshots** is Hassan’s highest-priority recommendation. He maintains an inspiration vault: whenever an app or website looks particularly good, he saves it. When starting a project, he can choose a combination of references—Duolingo mixed with other apps, for example—and supply multiple screenshots. That gives the model a concrete visual direction instead of requiring it to infer one from a vague adjective. He also uses voice notes to make his prompts more specific. Speaking for one to three minutes lets him describe the intended user, how the app should work, where a text box or image upload belongs, what the interface should look like, and which references matter. His resulting prompts are typically two or three paragraphs long. The useful detail is the product description: who is using the interface, what they are trying to accomplish, and what they should encounter along the way. The displayed example puts a long prompt with highlighted instructions beside two outfit-app screenshots. Hassan points to the lower interface as an output produced from that prompt. The example connects the detailed request to a visible result, rather than leaving “be more specific” as abstract advice. ![A long prompt with highlighted instructions on the left and two stacked interface screenshots on the right, the lower one showing a person’s outfit.](https://ai.engineer/api/talk-essay-media/1878b9726763c27b7d2535206b87c5d822bb37c4186218424a10235ec728b844) A detailed UX prompt appears beside two outfit-app screenshots. Detailed prompting does not mean putting every feature into a single request. For an app with seven features, Hassan recommends describing one or two features extensively at a time. His sequence is: 1. Start with a substantial foundational prompt and screenshots that establish the app’s direction. 2. Queue follow-up messages for individual feature additions. 3. Keep each request focused enough to explain its behavior in detail. The distinction is between **depth within a request** and **the number of features bundled into it**. You can increase the former while limiting the latter. ### The first generation is the base [12:52](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=772s) Fast models make that sequence easier to sustain. Hassan returns to cheaper open-source models for iteration and cites [**Composer 2.5**](https://cursor.com/blog/composer-2-5) as an example of how effective a fast editing loop can feel. More precisely, Cursor trained Composer 2.5 from the open-source **Kimi K2.5** checkpoint; that provenance does not establish that Composer’s resulting weights are public. His practical point is about the experience of refinement: a sufficiently capable model that responds quickly can be more useful for these tasks than routing every change through a closed-source model. The remaining responsibility belongs to the builder. Publishing the first generation unchanged leaves the agent’s defaults in charge of the product. Treat that generation as the base, supply more context and inspiration, and work back and forth until the app looks and feels good. Keep the app simple as you do so: the objective is to improve the experience of the working product, not to bury it under more features. ## Resources - [Hallmark](https://github.com/Nutlope/hallmark) — Installable design skill combining visual themes, checks for recurring AI design patterns, and workflows for studying and improving interfaces. - [LogoCreator source code](https://github.com/Nutlope/logocreator) — Hassan's logo-generation app, with source code and instructions for running it with Together AI. - [GLM-5.2 model card](https://huggingface.co/zai-org/GLM-5.2) — Official model page and downloadable weights for Z.ai's MIT-licensed text-generation model. - [Introducing Claude Opus 4.8](https://www.anthropic.com/news/claude-opus-4-8) — Anthropic's release announcement for the model used in Hassan's landing-page comparison. - [Introducing Composer 2.5](https://cursor.com/blog/composer-2-5) — Cursor explains Composer 2.5's training methods and its foundation in the Kimi K2.5 checkpoint. - [Nano Banana on Together AI](https://www.together.ai/models/gemini-flash-image-2-5) — Provider documentation and image-generation examples for Google's Gemini Flash Image 2.5. ## Slides ### Stop Letting Your Agents Ship Ugly UIs Hassan El Mghari shares how he approaches design and UX in AI apps as someone who isn’t a designer. [0:34](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=34s) [Title slide for Hassan El Mghari’s talk about AI app design.](https://assets.ai.engineer/sites/aiecode2025/sha256/bf52489a0387383c674a36cfe00e0fa0a90add56f92cd2ae26a55a9deae628ec.webp) together.ai Stop Letting Your Agents Ship Ugly UIs Hassan El Mghari @nutlope · Director of DX at Together AI ### I build AI apps Hassan shows a portfolio of AI apps and credits design and UX for their reach. He introduces his approach to both as someone who is not a designer. [0:42](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=42s) [A portfolio of AI apps alongside counts for apps built, users, and GitHub stars.](https://assets.ai.engineer/sites/aiecode2025/sha256/99e8026041694409d30d3d64f37bcc8bc276124a6e2322eea21d5fb33d55a9bd.webp) github.com/nutlope I build AI apps 40+ AI apps built | 3M users | 30K GitHub stars Turn ideas into comics Generate Perfect Subtitles Win up to $2,000 in prizes $1,000 Credits Loras Generate AI images using different LoRAs/styles Icons Illustrations Logos CodeArena OPEN SOURCE LLMs Which LLM is best at coding? Smart PDFs SUMMARIZE & SHARE PDFs Explore Agent Recipes whatisMOA.com Is GLM 5.2 better than Opus 4.8? Infographic Typing test Drumkit Three.js Make your agent a designer BlinkShot LogoCreator Generate a brand-ready logo in seconds. ExploreCareers Find career paths for you in seconds Turn your idea into an app [Additional small text in app screenshots is illegible.] ### Together AI platform Together AI offers inference across chat, image, audio and vision models, plus fine-tuning on user data and on-demand GPU clusters for training or inference. [1:03](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=63s) [Together AI services for running open models, fine-tuning, and launching GPU clusters.](https://assets.ai.engineer/sites/aiecode2025/sha256/f83204e186e6cac7cb275935372f28dad0cce6725ca1b41c8417ac2220510d0d.webp) together.ai We’re an AI native cloud platform for running, deploying, and training open source models. We make it easy to do: 1. Run open source AI models (Inference API): • GLM 5.2 → chat & coding models • Nano Banana → image models • Whisper → audio models • Kimi K2.7 → vision models 2. Finetune models on your own data (SFT, DPO, and RL) 3. Launch GPU clusters (H100s/B200s/B300s) on-demand to train your own models or run your own inference Trusted by innovators: CURSOR, Pika, Cartesia, LG AI Research, salesforce, wp ### LogoCreator LogoCreator pairs style and color controls with a grid of generated logos. The speaker uses it to show the design-focused apps he builds; the slide reports 85k users. [1:42](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=102s) [LogoCreator interface showing style controls and a grid of generated logos.](https://assets.ai.engineer/sites/aiecode2025/sha256/fa2e72bc0a9a44710ddad73baf02196bd97d4cf1806f2c4a7dc768c5eae9b009.webp) LogoCreator A free + OSS logo generator powered by Flux 85k users together.ai Interface text: LogoCreator COMPANY NAME CoffeMaker From website QUICK START Tech Coffee Fitness Finance DESCRIBE IT (optional) Cafe in boston LOGO TYPE Icon + name STYLE Minimal Geometric Gradient Mascot Hand-drawn Luxury Retro 3D Surprise me BRAND COLOR VARIATIONS 1 2 4 Generate 4 logos Using your key - $0.24 / set Powered by together.ai Generated logos: S CAFÉ Together AI Together AI HOWKS [illegible] ### SubStudio SubStudio generates subtitles from video. The demo shows ingestion, audio extraction, Whisper Large v3 transcription, and subtitle formatting checked off; the slide reports 8k users. [2:11](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=131s) [SubStudio shows completed video ingestion, audio extraction, transcription, and subtitle formatting.](https://assets.ai.engineer/sites/aiecode2025/sha256/7ca4ad6bf3f8e36a8b1a38a2aeb82bcb593741e1a4593672bb7f529bbf5f36d1.webp) SubStudio Generate subtitles from any video 8k users Interface text: SubStudio together.ai 1 Transcribe 2 Edit & Export MacBook Pro Speakers [illegible] Powered by together.ai Ingesting video Extracting audio Transcribing with AI (Whisper Large v3) Formatting subtitles together.ai ### Orchestrator The slide labels Orchestrator as coming soon for comic generation. The demo instead shows a coding agent pushing a gradient and fade-in change, with an option to create a pull request. [2:42](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=162s) [An Orchestrator slide shows a coding-task prompt alongside a sidebar describing comic generation.](https://assets.ai.engineer/sites/aiecode2025/sha256/a7d960f5450b2bc6f50d2ed847ce3f458b2e5c195206e331046fb36915d24aa3.webp) Coming soon... Orchestrator Generate comics from a prompt/image together.ai Interface text: Powered by together.ai What are you coding next? Type your task here... Claude Opus 4.7 Luffixos/spline-test main [2:46](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=166s) [An agent reports that requested page changes have been pushed and offers to create a pull request.](https://assets.ai.engineer/sites/aiecode2025/sha256/fde216ac1bb7015c85d6438223829e6b83f533ab2016c7fe3fb21117e5e794f7.webp) Coming soon... Orchestrator Generate comics from a prompt/image together.ai Interface text: Add vertical gradient background and fade-in hero heading Claude Opus 4.7 · Luffixos/spline-test · 1 min ago Cloning spline-test from main Change the page background to a soft vertical gradient, and add a subtle 0.6 fade-in animation to the hero heading on page load. Sandbox created with Claude Code 13 tool calls · 4 thoughts tailwind.config.js +11 -1 App.jsx +2 -2 App.jsx +1 -1 +1 more file Dependencies aren't installed, but the changes are standard Tailwind syntax. Committing and pushing. 19:33 2 tool calls Changes pushed to orchestrator/gradient-hero-fadein-[illegible]. 19:33 Ask a follow-up... Changes pushed Create PR ### Design as a competitive advantage The speaker argues that roughly 10–20% extra effort on UI can give AI apps a competitive advantage: their AI-generated look is often recognizable within seconds. [2:55](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=175s) [A statement says that building AI apps that look great is a competitive advantage.](https://assets.ai.engineer/sites/aiecode2025/sha256/7a6d077b6d0e883e14abd0afa3503c2de1052d44d3a550f290d9b781e9d8e3c3.webp) In a world of slop, building AI apps that look great is a huge competitive advantage together.ai ### Vibe-coded apps look the same The speaker points to recurring visual tells in vibe-coded apps, including purple gradients, italic headers, and spaced-out all-caps pills. [3:18](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=198s) [White text on black says that vibe-coded apps all look the same.](https://assets.ai.engineer/sites/aiecode2025/sha256/f6ace843be128b28d4a4a3e68fa5a5c8cefd5d12a40bb8223bb661b1ffe243d6.webp) Vibe-coded apps all look the same. ### Purple gradient backgrounds A circled and enlarged website background illustrates the purple gradients the speaker calls a recurring tell in vibe-coded apps. [3:25](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=205s) [A dark website example and enlarged detail highlight a purple gradient background.](https://assets.ai.engineer/sites/aiecode2025/sha256/595df03017fa001f672f0628aef9c33fbbd1aed315f09a41412d3c5023073de2.webp) Purple gradient backgrounds One API. Every integration. Months of work, in minutes. [illegible] Start building free Book a demo SOC 2 Type II Connected · 12 integrations acti[illegible] TRUSTED BY ENGINEERING TEAMS AT ### Italics in headers The example enlarges the italic, blue-to-purple word “data” within an otherwise white header. The speaker identifies italic headers as a recurring tell in vibe-coded apps. [3:29](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=209s) [A website example and enlarged detail highlight an italic word in a header.](https://assets.ai.engineer/sites/aiecode2025/sha256/639e4ea9bae42e898d0947fa5249b5db6e7b2c3c59e04d3de22582fe89664d13.webp) Italics in headers Understand your data in seconds Turn raw numbers into actionable insights. Metric connects to your tools, analyzes patterns, and surfaces the metrics that actually matter to your business. Start free trial Watch demo $84.2k 2,847 3.24% Revenue Overview 7 days TRUSTED BY TEAMS AT [illegible] Enlarged detail: Under data in Turn raw numbers into a ### Pills with all caps and a dot The speaker identifies widely spaced, all-caps pills as a recurring feature of AI-generated websites. The slide suggests reducing letter spacing to make the style more presentable. [3:35](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=215s) [A website example highlights an uppercase pill with a dot; a tip compares wider and tighter letter spacing.](https://assets.ai.engineer/sites/aiecode2025/sha256/5532443ba7b8fb9d23769312704cb4f161677545343b93b607091937fa7f1e5f.webp) Pills with all caps and a dot NOW IN PUBLIC BETA Build APIs that just work Relay is the developer platform for designing, testing, and deploying production-ready APIs. From schema to endpoint in minutes, not days. Start Building Free → View Documentation 12k+ Developers 99.99% Uptime <15ms Latency [Code illegible] NOW IN PUBLIC BETA Build API[cut off] Tip: If I want to keep the all caps font style, I tend to lower the letter spacing, making it look way more presentable. NOW IN PUBLIC BETA → NOW IN PUBLIC BETA Interface text: Relay Features How it Works Pricing Customers Docs Log in Get Started ### Emojis as icons A food delivery page uses a pizza emoji as an icon; the slide enlarges it to illustrate a visual tell the speaker associates with AI-generated websites. [3:43](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=223s) [A food delivery page with a pizza emoji enlarged and circled.](https://assets.ai.engineer/sites/aiecode2025/sha256/5a4e350e4338083ad60d915aef01a70e923f6ea74d3894639735e5e4129b368a.webp) Emojis as icons Crave it. We deliver it. From neighborhood gems to Michelin stars, Fork brings the city's best kitchens to your doorstep in under 30 minutes. Order Now Explore Menu Curated Quality Every restaurant is handpicked and taste-tested by our team. No compromises on ingredients, hygiene, or [illegible] Interface text: [illegible] MENU HOW IT WORKS REVIEWS Get the App [illegible] ### Spacing and padding issues Two circled examples highlight spacing problems: tightly packed delivery steps and a small chain list clustered inside a large dark panel. [3:46](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=226s) [Two website examples with areas circled to highlight spacing and padding.](https://assets.ai.engineer/sites/aiecode2025/sha256/914d178b403f08b72d35fad3cd1a7525d4b1cfe3ff70faacbe2a0c57896436c8.webp) Spacing & padding issues (not enough white space) HOW IT WORKS From craving to doorstep, three honest steps. We don’t bury fees in fine print or pretend a $4 taco costs $11. Here’s what actually happens when you order. 01 Tell us where you are. Drop your address. We’ll show you every kitchen within delivery range — sorted by what’s actually open right now. 10 SECONDS 02 Pick something honest. Real menus, real photos, real prices. No “service fees” that appear at checkout. The price you see is the price you pay. 2 MINUTES 03 Track every block. Watch your courier on the map. Text them directly. Tip in the app or in person — your call, either way it goes to them whole. [illegible] MINUTES Fourteen chains. No network switcher. [illegible] Ethereum [illegible] Bitcoin [illegible] Solana [illegible] Optimism [illegible] Avalanche [illegible] Polygon [illegible] Base [illegible] ### Here’s how to fix it The speaker introduces two ways he has tried to address recurring AI design patterns, starting with a design skill he built called Hallmark. [4:02](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=242s) [A black slide with the central text “Here’s how to fix it” and faint surrounding ideas.](https://assets.ai.engineer/sites/aiecode2025/sha256/1cdea1d8aaeae84b0cc0f268dde6773735ca611ff7cb6a214432194f6fbb02d4.webp) Here’s how to fix it Better model? DESIGN.md Revision Design skills Iteration ### Hallmark design rules Hallmark codifies recurring AI design patterns into rules for models, pairing a chosen structure, palette and theme with gates against clichés such as gradient heroes and invented stats. [4:12](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=252s) [A list of design patterns Hallmark avoids, alongside crossed-out examples.](https://assets.ai.engineer/sites/aiecode2025/sha256/a8bede52a4c5bfca715274c0cad3e99f92eb3bbe93b3449857d81ea0fb8a0a20.webp) / hallmark A skill that already knows the AI tells, so I do not have to flag them every time. • Picks a real structure, palette, and theme • Refuses the gradient hero and the three-card row • Refuses invented stats and fake testimonials • Refuses the italic accent word in the headline • Refuses AI-purple, glow orbs, and emoji icons • Refuses vague copy + 60 more AI slop gates like these. Crossed-out examples: Ship faster than ever Get Started Free gradient hero Lightning Fast Secure Scalable [illegible] three-card row 10,000+ Active Users 99.99% Uptime 4.9★ Rating invented stats Acme Features Pricing Docs Blog Get Started the AI nav together.ai ### Hallmark themes Hallmark offers over 20 themes as context for website creation. The gallery pairs each theme with an example, from a sourdough app to a record label and a developer infrastructure site. [4:38](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=278s) [A grid of named website examples representing different Hallmark themes.](https://assets.ai.engineer/sites/aiecode2025/sha256/adb715b503a5a459339ff5a348ebf4cfa969739d9602044c9ee6e7d2092a4c60.webp) / hallmark We have a 20+ themes for hallmark to choose from Bubble Sourdough app · Hum Real sourdough, in about forty-five minutes of actual work. [illegible] Distil Extraction API · Cobalt Any URL in. Clean Markdown out. [illegible] Cold Snap Record label · Carnival COLD SNAP. OUT 14 MARCH · COLD SNAP · ON VINYL · ON CASSETTE · STREAM EVERYWHERE [illegible] Cinder AI tool · Lumen built to think in real time. [illegible] Ferns & Fathom Tea menu · Custom Twenty-eight teas, placed by how each one is made. [illegible] Hollowback Apiary Honey farm · Garden Honey that tastes like one hillside. [illegible] Off-Register Print fair · Riso OFF-REGISTER Thirty-four studios. Eight presses. Soy ink everywhere. [illegible] Press Quaternary Type studio · Custom A typeface is a verb, not a noun. Restless [illegible] Tally SaaS · modern-minimal Bill what your customers actually use. [illegible] Wayfare Travel · atmospheric Pick a city. We'll pack the rest. LISBON [illegible] NAJM Fashion brand New cuts. Old soul. Made in Morocco. [illegible] Hyperlane Dev infrastructure For engineers who ship after dark. [illegible] together.ai ### Hallmark announcement and feedback Hallmark’s announcement is paired with two reactions: Triyansha values its design judgment, while Meiring de Wet reports using its audit and redesign skills on an open-source site. [5:26](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=326s) [Hallmark announcement alongside two social media reactions.](https://assets.ai.engineer/sites/aiecode2025/sha256/2cf825dd2bbe7960236d0b0ac3f4e81ef36d598281eee4f2638c76a7b7d115f2.webp) / hallmark Hassan @nutlope Introducing Hallmark! An open source design skill to make beautiful UIs and landing pages by default. Works in Claude Code, Cursor, and Codex. npx skills add nutlope/hallmark Embedded image: Designed. Not generated. $ npx skills add nutlope/hallmark Triyansha @tranquilquill Just tried Hallmark and what I absolutely love is the step up from tools like Refero or Mobbin MCP into an opinionated take that gives my design system judgement on AI slop. I don't want to copy a website, I want to get inspired by someone else's design, I want to make it my own, and I want for once to not look at another neon design!!!! Quoted post: Hassan @nutlope · May 19 Introducing Hallmark! Meiring de Wet @meiringdw · May 20 I tried out the Hallmark design skill today to de-slop one of my OSS sites. I used it as-is with no modifiers to see what it does out of the box, and I declare after this round that mailshot.dev is at last desloppified 1. installed the skill 2. /audit 3. /redesign 4. commit..push.. Here's their skills Interface text: 0:03 4:12 PM · May 19, 2026 · 730.5K Views 160 · 484 · 5K · 9.8K ### Freelance invoicing landing page A single prompt produces a Tidemark landing page, with an invoice mockup, pricing plans and freelancer FAQs. The speaker calls it a one-shot example and describes iteration as part of the process. [5:46](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=346s) [Hallmark example of an invoicing tool for freelance designers, including pricing and questions sections.](https://assets.ai.engineer/sites/aiecode2025/sha256/2c9ccbf672727d7c3d7b3fb9b9da81653a7e620e127d3709721ebeab26e7e413.webp) / hallmark build a landing page for a calm invoicing and money-tracking tool for freelance designers. Tidemark FOR FREELANCE DESIGNERS Get paid on time, without the chasing. Tidemark sends your invoices, keeps a calm eye on who has paid, and reminds the late ones for you. No dashboards full of red. No Sunday-night dread. Start free See how it works Free while you bill under $1,000 a month. No card to begin. INVOICE 0042 Paid Rowan & Field — Brand identity, phase two Design days · 6 — $3,300.00 Type licensing — $420.00 Total due — $3,720.00 Due 14 May Settled 16 May · 2 days late, handled quietly Built for one-person studios and the people who hate invoicing most — brand designers illustrators web & product freelancers motion studios type designers Make an invoice in the time it takes to write the email. Start from your last invoice, change the line that changed, send. Tidemark remembers each client’s rate, address, and the wording they like. Your numbers, your voice — just less typing. Duplicate any past invoice as a starting point. Saved clients fill in their own details. Send as a link or a PDF — the client picks. Start an invoice → CLIENT Rowan & Field LINE Design days · 6 @ $550 LINE Type licensing · $420 LINE Add another... $3,720.00 Send invoice “I used to keep a Sunday list of who owed me. Now I keep nothing — Tidemark remembers, and the awkward email isn't mine to write.” Priya Raman brand & packaging designer · solo since 2019 Priced so it pays for itself on the first late invoice. Two plans. Both send unlimited invoices and reminders. You only pay more when the money you’re tracking grows. Solo $0 / month While you invoice under $1,000 a month. Unlimited invoices & PDFs Automatic payment reminders One calm ledger view Pay by link & bank transfer Start on Solo Studio Most freelancers $12 / month For when invoicing is a real part of the month. Everything in Solo, no limit Custom reminder cadences per client Saved clients, rates & brand wording Recurring & retainer invoices Export for your accountant, any month Start on Studio Switch or cancel whenever. Your invoices and history stay yours, exportable, forever. The questions freelancers actually ask. Will my clients know a robot is reminding them? How does Tidemark know an invoice is paid? Interface text: How it works Pricing Questions Sign in Start free ### Furniture studio landing page Quoin’s landing page pairs furniture drawings with a four-stage process, from scaled plans and full-size joinery to small production runs and repairs. [6:03](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=363s) [Hallmark example of a furniture studio site with chair illustrations and a four-step process.](https://assets.ai.engineer/sites/aiecode2025/sha256/fa76db14757b4c46378588656e2eeb6ea9e74b3018d50c310e12d74bc1b41dfb.webp) / hallmark build a landing page for a contemporary furniture design studio. New release — the Drift collection, twelve pieces. See the [illegible] → Quoin Catalogue Studio Process Book the showroom Furniture, drawn to the millimetre. Quoin is a two-person studio. We draw each piece as a full elevation, prove the joinery in oak, then make it by hand in runs of forty or fewer. Read the catalogue → [illegible] lounge chair [illegible] From the drawing room, Margate We are not interested in the next chair. We are interested in the chair you keep — squared, waxed, and repairable for thirty years. [illegible] waxed-steel tripod The lightest thing we make: 2.1 kg, stackable three high, and turned from a single beech blank. How a piece becomes a piece 1:12 Drawn A full elevation, dimensioned and signed, before a single board is cut. The drawing is the contract. 1:1 Proved Every new joint is cut in oak at full size and racked by hand. If it moves, it goes back to the drawing. ≤40 Made Built in small runs, oiled and waxed, then stamped with its plate number on the underside. 30y Kept We hold the drawings for the life of the piece. Bring it back and we will re-wax, re-sling, or re-make a part. Sit in one before you commit. The drawing room in Margate is open Thursday to Saturday. Leave an email and we will send the next three slots and the full price list. Email address you@studio.example Request a slot No list, no newsletter — just the slots and the prices. ### Children's curiosity app comparison Without Hallmark, Wonderbox uses a purple background and a prominent question card. With Hallmark, Wondernaut uses a quieter cream layout. The speaker calls it cleaner and says its animations are not shown. [6:06](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=366s) [Two landing page designs for a children's curiosity app, labeled without Hallmark and with Hallmark.](https://assets.ai.engineer/sites/aiecode2025/sha256/998c4951486ca9275adcd115072677a3bee22393bd7c4afcb50dac95ec34af06.webp) What a design skill can do My prompt: “build a page for a daily-curiosity app for kids.” Without Hallmark Wonderbox How it works Features Topics Reviews Start free A fresh question every single day One big “why?” delivered fresh, daily. Wonderbox turns your kid’s endless questions into a daily adventure they can’t wait to open. Get today’s question See how it works Ages 5–11 5 min a day Kid-safe TODAY’S WONDER Why is the ocean salty? Rivers carry tiny bits of salt from rocks and soil all the way down to the sea. And the sea keeps it! Water leaves as clouds, but the salt stays behind — for millions of years! HOW IT WORKS Three tiny steps to a curious kid With Hallmark Wondernaut HOW IT WORKS FOR GROWN-UPS VOICES Try today A 60-SECOND MORNING HABIT · AGES [illegible] One new wonder, every single morning. Wondernaut hands your kid one genuinely surprising question at breakfast — then a short answer they can read or hear, and a tiny thing to try before the bus comes. Open today’s wonder See how a morning goes Free for the first two weeks. [illegible] TODAY · THE [illegible] Why is the sky blue in the day but orange at sunset? Sunlight is secretly every colour at once. Air scatters the blue light all over the sky — so by day you see blue everywhere. At sunset the light travels through far more air, the blue gets used up, and the warm colours win. Try it: shine a torch through a glass of milky water tonight. How one morning goes Four small beats, start to finish. Most kids are done before their toast is cold — and that’s the point. Curiosity is a habit you keep by keeping it short. together.ai ### App iteration is important The speaker builds an initial app in Codex or Claude Code, then often uses a smaller model such as GLM 5.2 for iteration. [6:44](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=404s) [Slide advocates using smaller, faster models for some app iteration tasks.](https://assets.ai.engineer/sites/aiecode2025/sha256/7a1375521a72828d5713d3bc9f0537fa228e8515e5834a54405b0e76f07d8c85.webp) App iteration is important GLM 5.2 vs Opus 4.8 And using smaller faster models makes sense in some of these situations ## Full transcript [0:00](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=0s) [upbeat music] All right. [0:17](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=17s) Hello, everybody. Welcome. Uh, my name is Hassan. I lead the developer experience team over at Together AI, and I'm super excited to be here today to talk to you about how to make AI apps look good or stop letting your agents ship ugly UIs. [0:32](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=32s) Um, I'm especially passionate about this project 'cause, uh, a big part of my job and just my personal life, I, I just love building a lot of these AI apps. [0:42](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=42s) And, uh, I'll go to the next slide. Uh, I've been building about ten apps a year for the last, uh, five years, and I've been lucky enough that some of these apps have, have gotten, you know, millions of users that have tried them out. [0:52](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=52s) And I think the number one reason for that is honestly just design and UX. And so that's what I wanna talk to you about today is how I approach design and UX in my apps as someone who's not a designer. [1:02](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=62s) Um, but before we move on really quick, I work at Together AI. We're an AI native cloud platform. We help you do three things. We help you run, uh, open source AI models, uh, chat models like GLM 5.2, image models like Nano Banana, audio models, vision models. [1:16](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=76s) We hit kind of all the different modalities and all the big open source models on our platform through our inference API. We let you fine-tune models on your own data. [1:24](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=84s) And then we also, uh, have a GPU cluster product where you can reserve H100s and B200s to, uh, train your own models or do your own inference. So, uh, getting into some demos, I just wanna start with a couple apps that, that I've built so you get a sense of like the, the type of stuff that I [1:39](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=99s) build. Uh, they're usually very simple one-page apps, uh, where I try to index on the design and some animations and things like that. So this is like a logo creator app that I built that it got about eighty-five thousand people, uh, that, that used it. [1:52](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=112s) This is one called Make Comics where it'll create a comic book from scratch starring you as, as the superhero. Um, and, uh, this one actually, we actually have in person at our, at the Together AI booth at this conference, um, where you can go and there's a little iPad, and you can take a picture and, and get [2:07](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=127s) a real comic book printed out that, that you can take home. Um, other stuff like, uh, this is generating subtitles from, from videos. I upload a lot of videos, uh, to YouTube and to Twitter, and so I needed something like this. [2:18](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=138s) And, uh, I, I looked into just like generating subtitles with, with open source models. This one had about eight thousand people that, that checked it out. Uh, you know, AI chat app for open source models. [2:28](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=148s) This one's fairly straightforward. Um, this one is, uh, uh, is a website that I built to help you build five or six different variations of whatever landing page you wanna build, and then you can kinda choose one of them. [2:40](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=160s) Um, and then the, the last one I'll show off really quickly is, uh, like an AI cloud agent where you can ask it to do things and, uh, give it a GitHub repo, and it'll spin up a sandbox and actually, um, uh, create a PR for you from scratch. [2:52](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=172s) And so this is just, uh, an example of like some of the stuff that, that, that I build and I put-- that I put out. And, and I think really the big takeaway here is, uh, you know, we live in a world now where more and more AI apps are kind of slop. [3:06](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=186s) You know, you can kinda look at it and within a second or two you can kinda tell that like, uh, this, this kinda looks AI-generated. And so I think just doing a little bit of extra effort, like a little ten to twenty percent after just focused on the UI, uh, is, is a really, really big competitive advantage [3:20](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=200s) for these things. Um, so like I said, vibe-coded apps kinda all look the same. They have the same tells. Um, they have the same kinda purple gradient background in every single one. [3:30](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=210s) Uh, they have italics in, in headers. Um, they always have the scroll to explore for some reason. Uh, they have these pills that are all like all caps and with, with, uh, spaced out, um, uh, letter spacing. [3:43](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=223s) They have these gradient logos. They use a bunch of emojis. And so it's, it's the same kind of stuff, sometimes some, some, uh, spacing and padding issues. Um, but the point is it's, it's actually just like, uh, uh, if you really think about it and you look at all of these AI-generated websites, you can come down and [3:57](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=237s) you can make a list of like twenty or thirty different things that are like, okay, this is, this is what AI slop is, right? All these like random graphics. [4:04](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=244s) Um, and, and so I'm gonna talk about two different ways that I've tried to overcome this. Um, and, and the first one I'm gonna start with is this design skill that I built called Hallmark. [4:14](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=254s) And Hallmark basically takes all of these, uh, AI slop patterns, uh, and, uh, codifies them, uh, and, and tells AI models like, "Hey, like, don't, don't use these. You know, don't do a purple gradient. [4:27](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=267s) Um, uh, don't use italics in the title." Uh, and, and all of these, uh, AI slop gates is what I call them, or slop patterns. Uh, so that's one thing it does. [4:36](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=276s) And then the second thing it does, which I think is really important when you're building stuff, is it gives your AI model a lot of different themes. And so I, I built a bunch of these different themes. [4:46](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=286s) We feed them into Hallmark. And so, like, when you ask Hallmark to create a, a, a website for you, it'll use these as context. And then, and that's gonna, that's gonna be a theme throughout this talk as well as of like if you give AI models really, really good inspiration, they tend to perform, uh, very, very well. [5:03](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=303s) Um, and so I launched this about, uh, a month and a half. I have about-- a month and a half ago. I've a little over ten thousand people that have, uh, tried it out so far. [5:11](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=311s) These are some examples of, of, uh, I've mostly indexed it on landing pages, but, uh, landing pages using Hallmark. And so this is build a landing page for an indie podcast, and it gives you that. [5:19](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=319s) Uh, and there's different skills and stuff that I'm not gonna get too deep into. Uh, but the main things I just wanna, uh, I, I just wanted to cover are the AI slop gates and the themes. [5:26](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=326s) And, and those two things really, uh, they do a lot. Um, and so this is the announcement tweet, and, and I got a, a bunch of really great feedback, and we're still iterating a lot to, to try to make it really, really good. [5:37](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=337s) Um, but I found this to be a, a, a one way that I try to avoid slop- AI slop websites. Uh, and so this is, uh, some, some more examples of Hallmark-generated pages. [5:48](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=348s) This one's build a landing page for, like, an invoicing, uh, app. And, and you can see, like, they don't have a lot of the same tells that you'd expect from an AI-generated website. [5:55](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=355s) And these also are just one-shot. Uh, right? This is one single prompt, and you get this whole website. And really a lot of the magic also is in kind of iterating on these things over and over and over again. [6:04](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=364s) Um, so this is, uh, this is another one. Uh, and then, like, a before and after. This is a, a pretty good example. This is, like, build a page for, like, a learning app for kids. [6:12](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=372s) And on the left is, like, without Hallmark, and on the right is with Hallmark. You can see it, like, you know, it, it's just a little bit cleaner. It's a little bit nicer. [6:19](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=379s) Uh, it has more, like, animations, which I didn't record a video to show it. But, um, it, it just looks a little bit nicer in general. This is another one as well. [6:26](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=386s) On the left, kinda like the, the classic AI-generated page with the, with the gradients and, and, and everything like that. And on the right is, is with Hallmark. You, you know, you can look at the one on the right and still say, like, "Oh, well, that's not a perfect landing page." [6:38](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=398s) Um, but it does give you a much better base to start out from, right? And then you can kind of iterate your way to something that, you know, really, really looks incredible. [6:45](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=405s) Um, and, uh, you know, I've been indexing on this thing, but app iteration is also very important. And I think specifically, uh, a, a lot of people, I think, undervalue the importance of using, uh, smaller, faster models for these app iteration, uh, cycles. [7:00](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=420s) A lot of the apps that I build now I'll kind of start in, like, Codex or Claude Code to build a base. And then for iterating, I'll use usually smaller open source model like GLM 5.2. [7:09](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=429s) GLM 5.2 is amazing. Uh, who, who here has used it, uh, in the show of hands? Okay, a few people. Um, so this is a model that came out two weeks ago that, in my opinion, was, like, the first open source model that, to actually be very, very good at design. [7:22](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=442s) And actually we're gonna play a little game here where one of these landing pages was generated by GLM 5.2, which is, like, a cheaper open source model, and the other one was generated with Opus 4.8. [7:32](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=452s) Um, raise your hand if you think GLM 5.2 is A. [7:37](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=457s) Okay, four hands. That was the GLM 5.2 one, right? So they're almost, almost indistinguishable in certain ways, where the one on the left is generated with GLM 5.2. It was created way faster, um, uh, as well 'cause it's just, it, it's a smaller model, so it's just inherently a lot faster. [7:52](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=472s) And the one on the right, you know, cost five times as much, uh, and, and was a lot slower as well. Um, so anyway, this is another one where the, the left and the right, the left one, uh, arguably is even more AI-generated, uh, and, and that's the one, uh, that, that, [8:08](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=488s) that Opus actually created, right? So, uh, anyway, like, when I say, like, use a cheaper model to iterate with, it still needs to be sufficiently good. And, and, um, GLM 5.2 is one of those models I feel is, is really, really incredible for, for this kind of stuff. [8:21](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=501s) So this is another example where, uh, it's very hard to tell the difference. Uh, and, and for iteration, so this is, like, a, a, a really simple website I one-shot with just that one prompt. [8:30](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=510s) This is using GLM 5.2. And you can see this does have a lot of AI tells. It's impressive that it actually works. It's an image playground where you send it a prompt and you get an image. [8:38](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=518s) Um, but just with a little bit of iteration on the left, I'm not gonna go through all of it, um, you get to a website that looks... It ki- it looks roughly similar, but it just looks a lot nicer, and it has a much better logo and way better loading states and animations and, uh, just better spacing [8:54](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=534s) overall, uh, with, with just a sing-- one or two follow-up prompts. So I, I think, like, uh, iteration is, is extremely, extremely important. [9:02](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=542s) Um, so the final part of my talk is just takeaways for, like, how, how I approach building apps that look good as someone who's not, not really a designer as well. [9:12](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=552s) Um, a lot of other people speaking on this track are, are incredibly talented designers and, and you should take a look at their thing. My, my objective is not necessarily to make the best designed app in the world. [9:23](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=563s) It's just to make apps that look and feel really good or at least much, much better than, like, purely kind of AI-generated slop. Um, so, so my, my main takeaways for this, one is, like, getting familiar with a lot of these AI tells, right? [9:37](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=577s) We went through some of the, like, patterns of, of AI slop. Uh, a lot of the time, you know, I sit down with people and I show them a website and they're like, "Oh, that's AI-generated," right? [9:44](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=584s) In two seconds. But they can't tell me why, right? They're like, "Yeah, that just looks AI-generated. I have no idea what it is." And so I, I think it's, it's worth understanding that, like, well, yeah, it's, it's purple gradient and it's this, this logo and it's this thing. [9:56](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=596s) Uh, and when you understand that stuff, I think it becomes a lot easier to, um, to, uh, bake that into the apps that you build or ask the AI models to, hey, like, "Hey, don't, don't do this," or, "Don't do that." [10:07](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=607s) Um, so, so that's, that's one tip I have. Uh, another one that's kinda tangential is, like, saving your preferences in some sort of skill or markdown file. You can do it in AGENTS.md. [10:16](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=616s) You can do kinda whatever you want. Um, but the big thing here I think is as you build stuff, you start to build an intuition for, like, what you want, what you don't want. [10:25](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=625s) Like, you generate a website, and every single time the logo looks like crap and you have to regenerate the logo. Um, you can start to build out an AGENTS.md that has a bunch of this stuff, like avoid this. [10:35](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=635s) For the logo, do them this way. For this, do it that way. Uh, and, and as I've gone, I've kind of built up, like, a substantial AGENTS.md that helps me do this. [10:43](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=643s) And, and to a degree, this is kind of what Hallmark is as well, right? If you don't have your own, you can use something like, like Hallmark. Um, this is maybe the most important one. [10:51](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=651s) If you take one thing away from this talk, please give your agents references and screenshots. I don't build anything, uh, nowadays without, uh, giving AI models a lot of inspiration. [11:02](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=662s) And I kinda have this, like, inspiration vault for, like, anytime I look at, like, a website or an app that I really like or that I'm like, "Wow," like, "This, this looks amazing," I'll just save it. [11:11](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=671s) Uh, I'll just save it somewhere. Now I have a, a, a really large collection of them. And so when I'm building a new app, I usually will, will, will be like, "Well, like, actually I kinda, I think I want this look like a, a mix of Duolingo and a mix of this app and a mix of this [11:22](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=682s) app." And, uh, I'll paste in a ton of screenshots for the AI model to look at and, and the output will always be way, way, way better. So, um, always try to use references and, and, uh, uh, screenshots. [11:33](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=693s) Um, and- Longer and more specific prompts are always better. Um, these days I, I will just record voice notes. Uh, and so I'll start a voice note for, like, one, two, three minutes, and I'll just rant and be like, "Well, I wanna build an app that looks like this, and here's how, uh, you, you should use it, [11:49](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=709s) and here's the type of user that's gonna use it, and we have a text box here, and we have an image upload thing, and here's how it should look, and here's, and here, here's some inspiration," right? [11:56](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=716s) And so it's usually, like, all my prompts now are, like, two or, two to three paragraphs. Um, so they're, they're, uh, a lot longer prompts and, and they usually do a lot better. [12:04](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=724s) Like, this is, like, a, an example of a much longer prompt. I'm not gonna go through all of it, but, uh, it, it just produces something that's just a little bit better. [12:11](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=731s) Like, uh, the, uh, the, the thing on the bottom was, was kinda produced with, with, with this prompt. Um, [12:18](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=738s) break things down into steps. I think, like-- So I just talked about make your prompts longer. Um, but also if you're building seven different features, you probably don't wanna put them all in the same prompt, right? [12:28](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=748s) You probably want, um... You, you can do one, you know, one or two features per prompt where you talk about them extensively and, uh, and, uh... Usually I'll send off, like, the start of the app will be, like, a, a huge prompt with a bunch of screenshots of inspiration, and then immediately I'll queue up, like, a bunch [12:44](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=764s) of other messages of, like, "Oh, we'll do this feature and do this feature and this, do this feature," and I'll kind of, uh, uh, let it go. So that's something that I, that I've seen helps. [12:52](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=772s) Cool. Uh, this is one, this is the one I talked about, iterating with a cheaper open source model can beat using closed source models for everything. Um, for iteration tasks I, I've, I've found they're a lot better. [13:02](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=782s) Um, I think, uh, Cursor did a great job proving this with, like, Composer 2.5, which is, like, an open source model that they post-trained. Um, and, uh, it, it kinda feels magical using it for iteration 'cause it's so, so, so fast. [13:14](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=794s) And so you'll see that in, in, uh, uh, some of these, uh, o-open source models. [13:19](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=799s) Cool. And then the last thing is, um, I see people kind of trying to one-shot apps and then being like, "Well, that's it. I'm done," you know? "I'm gonna post this as is." [13:28](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=808s) And it's really, really important to understand that, like, whatever your agent creates is just the base, right? And it's on you to kind of, like, give it additional context, give it additional inspiration, and go back and forth and, um, make the apps look and feel really good, but keep them simple, uh, and, and, uh, kind of iterate [13:46](https://www.youtube.com/watch?v=7GMKdpLsxwU&t=826s) that way. Cool. That's all I got. Thank you so much for coming. [audience applauding] [upbeat music]