# Supermega Design: every page > Supermega Design is a design and technology company. We design AI native experiences, interfaces, products, websites, and brands. Source: https://supermega.design/llms.txt # Supermega Design > Supermega Design is a design and technology company. We design AI native experiences, interfaces, products, websites, and brands. - Page: https://supermega.design/ - Markdown: https://supermega.design/index.md - Site index for agents: https://supermega.design/llms.txt --- # Is a design and technology company ## We design AI native experiences, interfaces, products, websites, and brands ## Clients Kaufland · SushiSwap · MyVault · Passion Pixels · Factory · Daisy · Twitch · Google ## Selected work - [Daisy](https://supermega.design/work/daisy) — Mobile App design · AI product · Brand - [MyVault](https://supermega.design/work/myvault) — Mobile App design · AI product · Brand - [Teached](https://supermega.design/work/teached) — Product design · Brand · Website - [Index](https://supermega.design/work/index-ai) — Product design · AI product · Brand - [Spotted](https://supermega.design/work/spotted) — Mobile App design · Website · Brand ## We design for human and for machine - [About Supermega Design](https://supermega.design/info) ## Supermega Design takes one idea all the way. We set a clear direction and build a visual language around it, shape how the product looks, moves, responds, and works, then turn that direction into rules, components, and code that people and agents can build with. ### brand - Brand Design - Creative Direction - Visual Identity - Motion Systems - Campaign Assets - Brand Engineering - Brand systems - Brand tools - Creative Coding - Automation Tools - Agent-ready Brand - Brand Content - Agent-ready guidelines - Context Engineering - Generative Templates ### Web - Web Design - Content Architecture - Design Systems - Interactive Experiences - Prototyping - Modular Interfaces - Design Engineering - Frontend Systems - Creative Development - Interaction Engineering - CMS Integration - Implementation QA - Agentic System - Content Systems - Visual Systems ### product - Product Design - Product Direction - Core Flows - Interaction Models - Motion and Feedback - Functional Prototyping - Interface Architecture - Interface Behavior - Component Systems - AI Product - Agent Personality - Conversational Flows - Trust and Control - Agent Workflows - Multimodal Interfaces ## Let’s create a super interface for you - [Contact (mark@supermega.design)](mailto:mark@supermega.design) - [Book a call now](https://cal.com/supermegadesign/30min) ================================================================ # Our Work > Case studies for Daisy, MyVault, Teached, Index, and Spotted. Brand, product, website, and AI design for teams turning new technology into useful products. - Page: https://supermega.design/work - Markdown: https://supermega.design/work.md - Site index for agents: https://supermega.design/llms.txt --- An overview of recent case studies, as well as a selection of our self-initiated projects. ## Cases - [Daisy](https://supermega.design/work/daisy) — Mobile App design · AI product · Brand - [MyVault](https://supermega.design/work/myvault) — Mobile App design · AI product · Brand - [Teached](https://supermega.design/work/teached) — Product design · Brand · Website - [Index](https://supermega.design/work/index-ai) — Product design · AI product · Brand - [Spotted](https://supermega.design/work/spotted) — Mobile App design · Website · Brand ## Let’s create a super interface for you - [Contact (mark@supermega.design)](mailto:mark@supermega.design) - [Book a call now](https://cal.com/supermegadesign/30min) ================================================================ # About Supermega Design > What a Super Interface is and how we work. Brand, web, product, and AI design, and the engineering behind it, for teams building with new technology. - Page: https://supermega.design/info - Markdown: https://supermega.design/info.md - Site index for agents: https://supermega.design/llms.txt --- # Info We Use Design and Technology to create **Super** **interface** for Companies and their Products. ## What is Super Interface An interface is where people, objects, and systems meet. A handle communicates how a door opens. A screen turns an intention into an action. A conversation gives an agent the context to do something. A Super Interface brings usefulness, beauty, and care to these exchanges. Its purpose is clear. Its behavior makes sense. Its details belong together, from the first encounter to everyday use. We design for human and for machine. That means considering the language, visuals, and interactions people experience, alongside the structure, context, and rules machines work with. Both shape how a brand or product becomes part of the world. ## Our Capabilities ### brand - Brand Design - Creative Direction - Visual Identity - Motion Systems - Campaign Assets - Brand Engineering - Brand systems - Brand tools - Creative Coding - Automation Tools - Agent-ready Brand - Brand Content - Agent-ready guidelines - Context Engineering - Generative Templates ### Web - Web Design - Content Architecture - Design Systems - Interactive Experiences - Prototyping - Modular Interfaces - Design Engineering - Frontend Systems - Creative Development - Interaction Engineering - CMS Integration - Implementation QA - Agentic System - Content Systems - Visual Systems ### product - Product Design - Product Direction - Core Flows - Interaction Models - Motion and Feedback - Functional Prototyping - Interface Architecture - Interface Behavior - Component Systems - AI Product - Agent Personality - Conversational Flows - Trust and Control - Agent Workflows - Multimodal Interfaces ## Our super work is built upon these principles After Carl Spitzweg, The Bookworm (c. 1850) - Craft We refine the hierarchy, language, behavior, motion, edge cases, and final two pixels. The details are where an interface becomes Super. - Truth An interface should never pretend. It should show what happened, what the system knows, what remains uncertain, and what the person can do next. - Maya Most Advanced Yet Acceptable. We take interfaces somewhere new while keeping them understandable, useful, and natural from the first interaction. - Agency People should understand what they can do, what the system is doing, and what happens next. AI may suggest or act, but the person keeps control. - Context Every product has a history, audience, language, and set of rules. We carry that context through the brand, interface, code, and AI behavior. ## We partner with teams turning new technology into useful products. ## Working Together We can help you shape what comes next, take responsibility for a project, or join the team already building it. We work directly with founders, designers, and engineers, with the same attention to direction and detail in every role. - Shape the Direction You have an idea to explore or a product to rethink. We help you define what it should become, work through the important decisions, and test possibilities through design and prototypes. Together, we establish a direction your team can build on. - Lead the Project You need a partner to take the work forward. We bring the right mix of brand, product design, and engineering to your project, carrying the work from early concepts through to implementation. You stay involved in the decisions as we develop the details. - Join Your Team You already have people building something. We work alongside them, bringing the design and engineering experience the project needs. We can take on a specific challenge or stay involved as the product develops, sharing the work and the decisions with your team. - Available for defined projects and ongoing partnerships. ## Let's create something great - [Contact (mark@supermega.design)](mailto:mark@supermega.design) - [Book a call now](https://cal.com/supermegadesign/30min) ================================================================ # Thinking and Processes > Essays on Super Interfaces, worldbuilding, and designing with Claude Code. How we think about the work, and the process behind it. - Page: https://supermega.design/thinking - Markdown: https://supermega.design/thinking.md - Site index for agents: https://supermega.design/llms.txt --- Perspectives and ideas taking shape within SMD. - [Brand Design With Opus 5.5](https://supermega.design/brand-design-with-opus-5-5) — 26 October 2026 · Directions, not mood boards, and AI brand guidelines the client's team can run on its own. - [Brand content system in Claude Code](https://supermega.design/brand-content-system-in-claude-code) — 03 March 2026 · Your agents don't know your brand. A brand content system fixes that. - [Product Design with Claude Code](https://supermega.design/product-design-with-claude-code) — 02 October 2025 · Prototypes, components, and the product itself as the design file. - [The Design Process: Passion Pixels AI](https://supermega.design/design-process-passion-pixels-ai) — 03 October 2025 · Designing an AI career companion to feel like a game you can't stop playing, not a questionnaire. - [Put users into a different world](https://supermega.design/put-users-into-a-different-world) — 01 October 2025 · Games hold attention for hours; most apps lose it in minutes. What products can borrow from worldbuilding. - [Super Interface](https://supermega.design/super-interface) — 29 September 2025 · Our name for an interface worth using — nine qualities every screen is checked against. - [Design writings](https://supermega.design/design-writings) — 16 September 2025 · How I’m going to use writing as a tool in design. ## Let’s create a super interface for you - [Contact (mark@supermega.design)](mailto:mark@supermega.design) - [Book a call now](https://cal.com/supermegadesign/30min) ================================================================ # Daisy, an AI College Companion > Klass Apps asked us for an AI college companion that feels like a living, breathing experience. Daisy is warm, colorful, and soft, more friend than planner. - Page: https://supermega.design/work/daisy - Markdown: https://supermega.design/work/daisy.md - Client: Klass Apps - Year: 2025 - Services: Mobile App design, AI product, Brand - Site index for agents: https://supermega.design/llms.txt --- ## Project **Design for how students Actually live.** ### Why College students live on fluid schedules, but their calendar apps treat them like office workers. Klass Apps asked us for an AI companion that would feel like a “living, breathing experience.” ### How Students have enough stress, so we made Daisy warm, colourful, and soft, more friend than planner. You tell her your plans, and she fits them into your week. ### Result Research to a finished app in five months. 40% of students still using it after 30 days · 100k downloads in the first month · 4.9 rating on the App Store. ## Ideas and solutions - **Plans in your own words.** Students tell Daisy what's happening in a chat, the way they already make plans, and she puts it in their week. - **A companion, not an office tool.** Calendars treat students like office workers. Daisy is warm, colourful and soft, more friend than planner. - **She learns your rhythm.** Daisy spots the clashes, finds the gaps and learns how you like to work, so every plan is easier than the last. - **One flower, many worlds.** The Daisy mark stays the same while her world changes around it, from the posters to the app icon. ## Capabilities Product Design · Core Flows · Interaction Models · Motion and Feedback · AI Product · Agent Personality · Conversational Flows · Brand Design · Visual Identity · Motion Systems · Campaign Assets ## Other cases - [Spotted, a College Recruiting App](https://supermega.design/work/spotted.md) - [Teached, the Student Management System](https://supermega.design/work/teached.md) - [MyVault, a Private AI Vault](https://supermega.design/work/myvault.md) - [Index, the AI Hiring System for Skilled Trades](https://supermega.design/work/index-ai.md) ================================================================ # Spotted, a College Recruiting App > College recruiting ran on emails coaches never read. We designed Spotted for the game itself, where coaches rate athletes from the stands. - Page: https://supermega.design/work/spotted - Markdown: https://supermega.design/work/spotted.md - Services: Mobile App design, Website, Brand - Site index for agents: https://supermega.design/llms.txt --- ## Project **Design for the moment you get spotted.** College recruiting ran on emails coaches never read. We designed an app for the moment it actually happens, at the game: athletes keep one profile, coaches rate them from the stands, and the follow-up sends itself. Dark, loud and fast, like game night. ## Ideas and solutions - **Recruiting at the game.** College recruiting ran on emails coaches never read. Spotted moves it to the moment it happens: coaches rate athletes from the stands, and the follow-up sends itself. - **One profile per athlete.** Athletes keep one profile with their highlights instead of chasing coaches by email. - **It looks like sport.** Recruiting tools look like admin software. Spotted is dark, loud and fast, like game night, something a 17-year-old is proud to share. - **The mark is a scout's viewfinder.** The brand is built around the moment you get spotted. ## Capabilities Product Design · Core Flows · Interaction Models · Motion and Feedback · Brand Design · Visual Identity · Motion Systems · Campaign Assets · Web Design · Interactive Experiences ## Other cases - [Daisy, an AI College Companion](https://supermega.design/work/daisy.md) - [Teached, the Student Management System](https://supermega.design/work/teached.md) - [MyVault, a Private AI Vault](https://supermega.design/work/myvault.md) - [Index, the AI Hiring System for Skilled Trades](https://supermega.design/work/index-ai.md) ================================================================ # Teached, the Student Management System > Teached runs a whole school from one place. We designed the brand, the product, and the website for this student management system for clock-hour schools. - Page: https://supermega.design/work/teached - Markdown: https://supermega.design/work/teached.md - Services: Product design, Brand, Website - Site index for agents: https://supermega.design/llms.txt --- ## Project **The student management system for schools.** ### Why Teached is a student management system for clock-hour schools. Admissions, classes, attendance, hours, grades, financial aid, student accounts and messages all run in one place. The team needed a brand and a product that clearly show how much it covers. ### How ### Brand We designed the brand: the logo, colours, type, illustrations, posters, billboards and website. The logo is a lowercase t built from seven blocks in seven colours. In the illustrations, a grid of dots stands for the students in a school, and a cursor picks out one of them. ### Product We redesigned the whole product: the staff app for instructors and offices, the student phone app, and the clock-in kiosk. Every office works from the same student record. Instructors take roll in one tap, the registrar verifies hours, and students see their progress to graduation. ### What ## Ideas and solutions - **One student record.** Admissions, classes, attendance, hours, grades, financial aid, accounts and messages run from the same record, so offices stop reconciling separate systems. - **Three products, one system.** We redesigned the staff app, the student phone app and the clock-in kiosk: instructors take roll in one tap, the registrar verifies hours, students see their progress to graduation. - **Seven parts of a school.** The logo is a lowercase t built from seven blocks in seven colours, one for each part of the school Teached runs. - **Every student seen.** In the brand, a grid of dots stands for the students in a school, and a cursor picks out one of them. ## Capabilities Brand Design · Visual Identity · Logo · Motion Systems · Campaign Assets · Product Design · Core Flows · Interaction Models · Design Systems · Prototyping · Web Design · Interactive Experiences ## Other cases - [Daisy, an AI College Companion](https://supermega.design/work/daisy.md) - [Spotted, a College Recruiting App](https://supermega.design/work/spotted.md) - [MyVault, a Private AI Vault](https://supermega.design/work/myvault.md) - [Index, the AI Hiring System for Skilled Trades](https://supermega.design/work/index-ai.md) ================================================================ # MyVault, a Private AI Vault > MyVault is a private AI vault for the documents that run your life. We designed the brand, the product, the AI flows, and the working prototypes. - Page: https://supermega.design/work/myvault - Markdown: https://supermega.design/work/myvault.md - Services: Mobile App design, AI product, Brand - Site index for agents: https://supermega.design/llms.txt --- ## Project **Private AI Vault that runs your life.** ### Product Every life builds up a quiet archive. A lease signed in a hurry, a policy nobody has read, a passport that expires next spring, the medical letter that matters once a year. Most of it lives in drawers, inboxes and old folders, and the rest lives in your head, where it keeps you up at night. MyVault gathers all of it into one private place and keeps it in order. You stop being the one who has to remember, and your life gets a little lighter. ### Vision Order brings a kind of peace, and we wanted you to see it before you read a word. MyVault takes its visual language from Japanese woodblock prints, an art built on restraint, where what you leave out matters as much as what you put in. The colours move like morning fog, the lines stay clean, and the empty space is part of the design. Opening it should feel like the moment a window lets the morning in: quiet, clear, and unhurried. ## Ideas and solutions - **One private place.** Leases, policies, passports and medical letters live in drawers, inboxes and your head. MyVault gathers them in one private place and keeps them in order, so you stop being the one who has to remember. - **Calm you can see.** The visual language comes from Japanese woodblock prints: restraint, clean lines, colours that move like morning fog, empty space as part of the design. - **Six parts of a life, one mark.** Home, money, health, family, work and identity lock together into one hexagon, kikkō, a Japanese sign of protection and long life. Together they also form an M. ## Capabilities Brand Design · Visual Identity · Motion Systems · Campaign Assets · Product Design · Core Flows · Interaction Models · Motion and Feedback · AI Product · Conversational Flows · Trust and Control · Agent Workflows · Design Engineering · Functional Prototyping · Component Systems · Agent-ready Brand · Brand Content ## Other cases - [Daisy, an AI College Companion](https://supermega.design/work/daisy.md) - [Spotted, a College Recruiting App](https://supermega.design/work/spotted.md) - [Teached, the Student Management System](https://supermega.design/work/teached.md) - [Index, the AI Hiring System for Skilled Trades](https://supermega.design/work/index-ai.md) ================================================================ # Index, the AI Hiring System for Skilled Trades > Index finds the people who build, fix and care. A hiring dashboard for skilled trades, with an AI layer where a person always decides. - Page: https://supermega.design/work/index-ai - Markdown: https://supermega.design/work/index-ai.md - Services: Product design, AI product, Brand - Site index for agents: https://supermega.design/llms.txt --- ## Project **The AI hiring system for skilled trades.** ### Why Index is an AI HR system for companies that hire skilled trades in Germany. It finds applicants, talks to them, screens them, books interviews and keeps a pool of people for the next role. The applicants are electricians, plumbers, carers and technicians who apply from a phone, often at night and without a CV. The team needed a brand and a product that show how much the system does on its own, and that a person still makes every hiring decision. ### How · Brand We designed the brand: the logo, colours, type, pictograms, ads and posters. The logo is seven dots that form one mark. In the photos, each dot holds a trade. ### How · Product We designed the whole system around one recruiter and their assistant. The assistant runs the job ads, answers every applicant by SMS, email or WhatsApp, asks the screening questions and offers interview slots. The recruiter starts the day with a brief of who needs them. Every applicant comes with a summary that shows where each point came from. The assistant can suggest, draft or act, but rejecting and hiring always stay with a person. ## Ideas and solutions - **No CV needed.** Skilled trades apply from a phone, often at night and without a CV. Index asks four questions in the chat instead; 58% of the people hired never sent a CV. - **A recruiter and an assistant.** The assistant runs the job ads, answers every applicant by SMS, email or WhatsApp, screens them and offers interview slots. The recruiter starts the day with a brief of who needs them. - **A person decides.** The assistant can suggest, draft or act, but rejecting and hiring always stay with a person, and every applicant summary shows where each point came from. - **Seven dots, every trade.** The logo is seven dots that form one mark; in the photos, each dot holds a trade. ## Capabilities Brand Design · Visual Identity · Motion Systems · Campaign Assets · Product Design · Core Flows · Interaction Models · Motion and Feedback · AI Product · Agent Personality · Conversational Flows · Trust and Control · Agent Workflows · Web Design · Interactive Experiences ## Other cases - [Daisy, an AI College Companion](https://supermega.design/work/daisy.md) - [Spotted, a College Recruiting App](https://supermega.design/work/spotted.md) - [Teached, the Student Management System](https://supermega.design/work/teached.md) - [MyVault, a Private AI Vault](https://supermega.design/work/myvault.md) ================================================================ # Gallery > An ongoing collection of visual studies, interfaces, brand pieces, and tools from Supermega Design. - Page: https://supermega.design/gallery - Markdown: https://supermega.design/gallery.md - Site index for agents: https://supermega.design/llms.txt --- An ongoing collection of visual studies, interfaces, and tools from the studio. - Tag - View - in a row - 001 Brickly Footer concept - 002 Becoming Spotted · Instagram - 003 Grid studies Motion study - 004 Gets smarter MyVault · Card - 005 Nadir Brand film - 006 Ashlar - 007 Daisy App icons - 008 Switchboard Lab tool - 009 Ship Poster series - 010 Argus Mark films - 011 Bloom Daisy · Night - 012 Trading calendar Product UI - 013 Red chair - 014 Ring of six MyVault · Mark board - 015 Focus Spotted · Mark board - 016 AI Tools Hub Logo - 017 Argument - 018 Index Hiring posters - 019 Committed Spotted · Instagram - 020 Teached Poster - 021 Corva - 022 Daisy Findings - 023 Screening check Index · Product UI - 024 Parallel Poster series - 025 Shift Factory · Brand film - 026 Paper pile MyVault · Collage - 027 Corridor Lab - 028 Availability Product UI - 029 Spotted Mark board - 030 Trade notifications Product UI - 031 Industrial electrician Index · Chat - 032 Constellation MyVault · Mark board - 033 Two weeks Poster series - 034 Morning brief Index · Mobile - 035 Signal Spotted · Mark board - 036 AI Tools Hub Newsletter - 037 Seven parts Teached · Instagram - 038 Index Type specimen - 039 The empty space MyVault · Binder - 040 Merged Poster series ================================================================ # What Is a Super Interface? > Our name for an interface worth using, and the nine qualities every screen we make is checked against. - Page: https://supermega.design/super-interface - Markdown: https://supermega.design/super-interface.md - Published: 2025-09-29 - Site index for agents: https://supermega.design/llms.txt --- - But first, What is interface? - Is there such a thing as Super Interfaces? - How am I going to design Super Interface? - How does Super Interface affect your software: - How super interfaces can be achieved? One day I’ve seen a man next to me unlocking his car by holding white card near its window (guess what car). Then saw same white card unlocking garage door. After in the hotel, I used white card to run an elevator and unlock my room door. What a great way to ruin the experience!!! The interface is broken. The experience is dead. It got me thinking of interfaces more and more. And I have embarked on a journey to think about and work on a Super Interface. In this writing, I will present my thinking on what is Super Interface, its qualities, how it affects your product and how it can be achieved in your product. ## But first, What is interface? Derived from Latin “inter” means “between” or “among”. It conveys the idea of communication, interaction between different systems or entities. “Face” in this context refers to the surface or boundary of an object or entity. It represents external aspects through which interaction occurs. Term “interface” emphasises the concept of communication between elements. It can be found everywhere around us: door handles, Stop signs, Crosswalks, Instagram app, TV pilot… In software interface serves as the medium through which the user interacts with systems and applications, enabling communication. As software has become a part of our lives, and not simply a utility, digital interfaces are becoming more and more important. “Interfaces matter to me more than anything else and it always has” Bret Victor. It is so for every human, although most don’t recognise it. Interface is a mean of communication between human and external world. It has filled our modern life, just like the air we breathe. The interface translates human thoughts and intentions into real-world events. ## Is there such a thing as Super Interfaces? My thinking is simple. There are interfaces so bad they are not usable. And it’s a fact! I’m sure everyone has experienced bad interface. What distinguishes bad interfaces is that they are dysfunctionally ugly. From my own experience, tv pilot has always been the worst. Here are some examples of bad interfaces(imo). If there are Bad Interfaces, on the other side of the spectrum will be Good Interfaces. As Bad interfaces are dysfunctionally ugly. Good interfaces are functionally beautiful. Some of them are so well-designed, you don’t even mention them. Some feel so natural, using it brings you joy every time you interact with them. Some example are: Good Door handles, Stop signs, Crosswalks, Ipod 1, Apple notes, Family Wallet app… Super Interface sits on the far right of the spectrum, up to “perfection”. It is well known that perfection is impossible to achieve. Software Super Interface is the closest you can get as a computer tool. ## How am I going to design Super Interface? In order to be able to create something, one must understand it. There are 9 qualities that define Super Interfaces. Some I have come up with, some I have borrowed from well-known design thinkers. ### 1. Super interfaces must be easy to use. Interface is bought to be used. User must be able to navigate and use interface with a minimal learning curve. It makes every task simple straightforward and intuitive. ### 2. Super Interface is clean and clear. Super interface does not allow for any distractions. It emphasises form and function while disregarding all unnecessary elements. ### 3. Super Interface evokes feelings. A truly effective Super Interface creates an emotional connection with its users. It should offer an engaging experience that leaves a lasting impression, making the interaction not just functional but also memorable. ### 4. Super Interface is functional. Functionality is at the heart of a Super Interface. It must be designed with a clear purpose, focusing on enabling users to accomplish their tasks efficiently and effectively through well-thought-out features. ### 5. Super Interface is beautiful. A Super Interface should be visually appealing, drawing users in with its aesthetic qualities. The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful. ### 6. Super Interface is intuitive. An intuitive interface has a natural flow, allowing users to feel and predict actions and navigate effortlessly. The design should make it clear what users can do, reducing the need for guesswork. At best, it’s self-explanatory. ### 7. Super Interface is designed in accordance to the laws of nature. Interactions should feel natural and seamless, mimicking real-world behaviours and expectations. ### 8. Super Interface is to serve users. Every design choice should prioritise the user’s needs. It should be user-centered, providing genuinely helpful features and adding value to the user’s experience. ### 9. Super Interface is a medium. Interface serves as a conduit for information and a tool for communication. It should effectively facilitate the exchange of information and support user interactions in a meaningful way. ## How does Super Interface affect your software: ### Differentiates in crowded market In a saturated software market, a Super Interface becomes a way to stand out in a superior manner. It distinguishes your software from competitors by offering a unique and exceptional user experience. ### Accelerates user onboarding The intuitive nature of a Super Interface simplifies the onboarding process for new users. They can quickly understand and begin using the software without extensive training, leading to faster adoption and satisfaction. ### Reduces support costs By providing an intuitive and user-friendly interface, users are less likely to encounter issues or require assistance. This reduction in support queries can lower operational costs and improve efficiency. ### Increases accessibility A well-designed Super Interface often incorporates accessibility features, making the software usable by a broader audience, including individuals with disabilities. This inclusivity can expand your user base and demonstrate social responsibility. ### Enhances user retention A Super Interface can significantly improve user retention. When users find the interface enjoyable and easy to use, they are more likely to continue using the software and recommend it to others. ## How super interfaces can be achieved? Simple steps to mastery. ### Embrace minimalism Adopt a minimalist approach to design. Strip away all non-essential elements. This might be controversial, as it involves saying no to numerous features and designs, but it can lead to a cleaner, more focused interface. ### Challenge design norms Don’t be afraid to challenge conventional design norms. Innovative and bold design choices can set your interface apart, even if they initially seem risky or unconventional. ### Integrate AI and automation Utilize AI and automation to personalize the user experience. This can significantly enhance usability, but it also raises ethical questions about data privacy and the extent of machine involvement in user interactions. ### Test obsessively Implement rigorous and continuous testing with real users in diverse environments. This can uncover unexpected issues and opportunities, but it also requires a commitment to constant iteration and improvement, which can be resource-intensive. Or simply hire → [supermega.design](https://supermega.design/) Share: Discuss with ai: Copy: By Markiian Bobyliak Markiian is the founder and design director at Supermega Design. ================================================================ # Design Writings > Why we write. Writing as a tool in design, inspired by Paul Graham's essays, and what this blog will cover. - Page: https://supermega.design/design-writings - Markdown: https://supermega.design/design-writings.md - Published: 2025-09-16 - Site index for agents: https://supermega.design/llms.txt --- - First - Quick introduction - Design Writing - What Am I going write about? - My writing goals ## First I’d like to confess… I’m no good at writing. But I want to write. I have been greatly inspired Paul Graham’s Essays. His flawless style and clean sentences make you remember the subject, it tips right into your memory. I’d like to express my ideas and opinions in the same clear and straightforward way. Paul has stated “Putting ideas into words is a severe test”, and I’m taking on the challenge on writing regularly and consistently. ## Quick introduction I’m Markiian, I design software interfaces and building supermega.design — design partner for BOLD founders. Role of design partner is to provide taste, expertise and knowledge in creating engaging, joyful and innovative experiences. We like to work with people who think big, dream enormously and like to challenge convenient norms and standard practices (we think standard practice is bad practice). We call them BOLD founders. ## Design Writing I believe that craftsmanship is essential for every art — and this applies to the art of software design. If you want to become a better designer you have to design. However some design concepts can be better expressed with words. Apple famously designs its products for an emotional response. They ask how users should fell using a product and design from there. So this phase of discovery has to be put into words. And there’s a lot more. I believe putting ideas into words before pixels will strengthen one’s design game. Before designing around same template, best practise, try to express in words what the user has to feel using your product. What do you want them to feel. What are the ways to achieve it. This will help you eliminate unnecessary design shots and experimentations. Writing down will crystalize your ideas and make you memorize it. ## What Am I going write about? A lot of the time design writing is centered around “How”. How to do user research, how to build a design system, how to handle color. My writing will dive into the deeper aspects of design, exploring the “What,” “Why,” and “When” behind successful interfaces and experiences. What user wants to see, why would anybody use it, what makes the experience stand out, what brings joy, how to make it playful, how does user feel using a product, etc. I will be exploring interfaces, processes and ideas. Through these explorations, I hope to find insights, and inspiration for myself as well as for the reader. ## My writing goals My primary writing goal is simple: just to write regularly and consistently, sharing my thoughts, insights, and experiences in the world of design. By putting my ideas into words, I aim to crystallise my thoughts, clarify my understanding, and deepen my knowledge of design principles and processes. I hope this will become a platform for reflection and growth. It will help me refine my approach to design and develop a system for designing software, designing a company, designing just about anything. I’m a believer in that if one can design anything, one can design everything. Here I would like to convey this first piece. I will be sharing more ideas from post 2 and onward. My main goal is to stay consistent with writing. Share: Discuss with ai: Copy: By Markiian Bobyliak Markiian is the founder and design director at Supermega Design. ================================================================ # Brand Design With Opus 5.5 > How we design a brand with Opus 5.5 and Midjourney: real directions, 500+ logo images, and AI brand guidelines the client's team can run on its own. - Page: https://supermega.design/brand-design-with-opus-5-5 - Markdown: https://supermega.design/brand-design-with-opus-5-5.md - Published: 2026-03-03 - Site index for agents: https://supermega.design/llms.txt --- - The Last Couple of Weeks - What This Essay Covers - Direction Is the Work Now - Directions, Not Mood Boards - Iterating on the Logo and Brand Elements - The Visual Pipeline - The Design System - What I Think TL;DR Opus 5.5 changed how we design a brand. We build real directions instead of mood boards, iterate on the logo with Midjourney and Opus, and finish with AI brand guidelines: uses, components, and rules an agent follows to make new assets, with a person approving each one. ## The Last Couple of Weeks Our design process changed in the last couple of weeks. Most of the change came with one release: [Opus 5.5](https://www.anthropic.com/claude-opus-5-5). It’s so powerful. I’m yet to find out what it cannot do. Previous models had no design sense. They didn’t understand typography, spacing, layout, or any of the small decisions that make a design feel finished, and you couldn’t use what they made for anything you’d show a client. Opus 5.5 does a great job at all of it. Take logo design as an example. I like to iterate on a logo. I come up with one direction, or a few, and then I iterate on each of them a lot, tens of times, with small changes every time. Opus 5.5 is very good at this. Previous models couldn’t do it at all. It does much more than variations. It finds references, creates visuals, organizes the design system, names and sorts the layers in our Figma files, and keeps the components in order. It also comes up with ideas of its own. Some of them are really good. Logo iterations for Readog. ## What This Essay Covers In this essay we walk through how we design a brand today, from the first directions to a system the client’s team can run on their own. Our example is Readog, an iOS app that helps people read more, with a dog as their reading companion. The new process changed how we work at every stage. The time from the first call to a product launch went from months to weeks. A launch needs three things: the brand, the product, and the website. Each one has its own process. This essay covers the brand. The product and the website get essays of their own. ## Direction Is the Work Now Much of brand design is becoming creative direction. The execution, very often, is up to the models. That changes two things: speed and possibilities. A small team can move much faster, and the work can be much better. We believe quantity is a prerequisite of quality. You see more options, your judgment gets sharper, and the one you finally pick is stronger. Models raise the quantity a lot. So we hand many tasks to them: variations, resizes, cleanup, file organization, and first passes at visuals. Our time goes to choosing, editing, and saying no. Mostly saying no. ## Directions, Not Mood Boards Brand projects used to start with mood boards. We collected images, laid them out, and showed them to the client. The client then had to imagine their brand from other people’s work. We don’t make mood boards anymore. We find references, build three to five directions, and design each one for real. The client sees an actual brand direction: a mark, a palette, type, and a few applications like an app icon, a social post, and a blog header, all built from the references we found. Models can’t design a direction on their own, but they speed up every step of it. That’s why we can now show several real directions in the time one used to take. For Readog we believed the best fit was a calm, illustrated style. We still designed the other directions in full. The client saw everything side by side and agreed to go with our suggestion. Three directions for Readog. We picked Riso. We also built an internal tool, Artifact, where we generate directions from a brief. Directions in Artifact, our internal tool. ## Iterating on the Logo and Brand Elements Once the direction is set, we iterate on the logo and on brand assets and elements. This is where the models work well, and two of them share the work. Midjourney draws. Opus 5.5 does everything around the drawing: it writes the prompts, sorts the results, and builds everything in Figma. We created the first set of elements ourselves, and the models extended it, creating many new elements in the same style. The Readog logo rounds alone produced more than 500 images before we landed on the final mark. From those elements we built a set of components, the building blocks of the design system. With them, Opus put together lots and lots of different assets, creatives, and elements. Then we edited those by hand and picked the best of them as the main reference. The models kept creating, guided by that reference. We edited again and added the best new pieces to the reference. We ran this loop again and again, until we were happy with the quality of the output and the reference library was big enough to build on. For Readog the library became a shelf in Figma, with 22 dogs, around 60 objects, 20 places, and 16 patterns. The Readog shelf of parts. ## The Visual Pipeline The brand also needs a way to make visuals in volume, so we set up an image generation style and pipeline. For Readog those are illustrations. We generate the illustrations in Midjourney, using a [Midjourney style](https://docs.midjourney.com/hc/en-us/articles/39193335040013-Moodboards) we built for the brand. For Readog that style reads like a riso print on cream paper, a little grainy and slightly off-register, in the app’s own inks. We are big fans of Midjourney. We believe nothing comes even close to it for this kind of work. Then we vectorize every pick with a tool we built for this and placed inside the brand system. It goes to the client with everything else, so their team can keep turning new illustrations into vectors after we hand the brand over. Once it’s vectorized, it goes into Figma, where we organize it properly with the rest of the brand. Midjourney isn’t good at everything. Simple repeating patterns, like gingham, stripes, or scallops, come out messy and uneven. So we draw those with code instead. A short script draws each pattern exactly, in the brand’s colors, and it goes into Figma next to the illustrations, ready to be used with them. For Readog we generated close to 1,500 images in Midjourney and ended up with more than 1,100 vector files. Over three days the pipeline carried more than 200 finished brand visuals: blog headers, social posts, App Store art, billboards, email headers, and a sticker sheet. Every one of them was built from the parts in our reference library. ## The Design System The last part of the brand is the design system. It’s a templated system and a set of tools for creating assets, made so the client’s team can keep producing work after we leave. Think of it as AI brand guidelines: a design system built for agents. It has three parts. Uses say which assets the brand needs, in what format, and for what job. Components are the brand’s parts, built in Figma. Rules are every decision we made, written down. The agent builds each new asset from the components, checks it against the rules, and a person approves it. For this client, the main distribution plan was SEO content, ASO, and paid ads. Each channel needs its own assets, so we built templates in Figma around those three. SEO content means a lot of blog posts, and every post needs a header. So blog headers got their own template: a 1600 by 900 frame the agent fills with parts from the library, plus a 3:2 crop for feeds and a square one for social. Each header shows the article’s idea in one simple scene. Blog headers often show up small, next to a Google result or in a social feed, and a simple scene stays clear at that size. For ASO, the main assets are the App Store screenshots. People decide whether to download the app from those few images. We made the screenshots in the same system as everything else. Each one has a short line of copy and a real screen from the app, framed in an open book, so the App Store page looks like the rest of the brand. For paid ads and social media, the agent builds the same scenes in any size the channel needs, from square posts to stories, from the same parts. The agent doesn’t design on its own. There is a clearly defined system behind it. **Uses.** We decide which assets the brand needs, starting from the distribution plan. Each use gets a format, a job, and the parts it’s built from. A Readog blog header is 1600 by 900 pixels and shows the article’s idea in one scene. Readog has 13 uses and a scene for each of 18 blog topics. **Components.** The parts from our reference library, built as components in Figma: every dog, object, place, and pattern on the shelf. Every template is put together from them, and the library grows as the brand grows. **Rules.** Every decision we make during the brand work gets written down, so the agent doesn’t undo it. On Readog, the first visuals came out too dark, then too bright. We settled on the app’s own bright colors, printed like riso on cream paper, and that became a rule. It’s one of many. Readog has rules for color, composition, type, patterns, and each use, from how much empty space a visual keeps to how many elements it can hold. The agent reads the rules before it makes anything and checks its work against them after. ### Making One Blog Header Say the client’s team needs a header for "How to Read Ten Pages a Day." The agent finds the blog header row and picks a scene from the topic map. Habits get the dog by a half-filled timer ring. Reading at Night gets the dog in bed under a quilt. It builds three versions in Figma from components, checks each one against the rules at full size and at thumbnail size, and reports what passes. A person picks one, and the agent exports every size the post needs. The agent works in Figma through the [official Figma MCP](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server). It uploads our vector files straight into the Figma file, builds with Figma’s own plugin code, and takes screenshots, so the agent can see what it built and fix it. That loop of building, looking, and fixing is most of our work. A blog header made with our system. ### How the System Grows The system keeps growing after we hand it over, because the brand keeps needing new things. The client’s team grows it with the same tools we used. Say a blog post needs a dog on a bike, and there’s no dog on a bike in the library. The team makes one the same way we made all the others. They generate it in Midjourney with the brand’s style, vectorize it with our tool, and add it to Figma as a new component. The whole flow is already set up for them: the Midjourney style, the vectorize tool, the Figma library, and a guide for each step. So making a new part is easy, and it matches the rest of the brand. Next time someone needs it, it’s already there. That’s how the Readog shelf grew while we were building it, from eight dogs to 22. The rules grow the same way. When the team keeps fixing the same mistake in the agent’s work, the agent writes that fix down as a new rule, and stops making the mistake. And when the brand needs a new kind of asset, like a podcast cover, the team just asks for it. The agent adds it to the list of uses, with its size and its job, and builds the template from the components. The team checks it and approves it. ### Two Guides We write two guides, one for the agent and one for the people on the client’s team. The agent’s guide is a [skill](https://code.claude.com/docs/en/skills): written instructions the agent loads before it starts. It’s the visual side of the [brand content system](https://supermega.design/brand-design-with-opus-5-5) we use for writing. It tells the agent where everything is, from the list of uses and the rules to the right pages and frames in the Figma file. It also walks the agent through the steps, from picking a scene to checking the result. Without it, the agent would have to find its way around the brand from scratch every time. The people’s guide is a page in Figma. It shows the parts, the templates, and the best finished visuals, with the main rules on one page. Anyone on the team can open it and see how the brand works and what good looks like. With both in place, anyone on the client’s team, or their agent, can make any new asset, from a blog header to an App Store screenshot or a paid ad. The Readog design system files. ## What I Think I’m excited about this. The models do a huge part of the work now, and they do it well. But every good thing in a brand still comes from a decision someone made: the direction, the edits, and the many nos. That part is still ours, and I don’t think it’s going anywhere. That’s how we design a brand today. Share: Discuss with ai: Copy: By Markiian Bobyliak Markiian is the founder and design director at Supermega Design. ================================================================ # Brand Content System in Claude Code > Your agents don't know your brand. A brand content system, a folder of markdown and YAML files your agents read before they write, fixes that. - Page: https://supermega.design/brand-content-system-in-claude-code - Markdown: https://supermega.design/brand-content-system-in-claude-code.md - Published: 2026-03-03 - Site index for agents: https://supermega.design/llms.txt --- - The AI Slop - When Creation Is Easy, Distribution Wins - Your Agents Don't Know Who You Are - Brand Content System in Claude Code - Creative Directors Become Directors TL;DR A brand content system is a folder of structured files, markdown and YAML, that AI agents read before writing anything for your brand. Voice rules, positioning, banned phrases, calibration examples. The agent loads the right ones for each task and it makes your content sound on brand. ## The AI Slop It's not a secret that everyone writes with AI nowadays. It's not a secret that it often is AI slop, neither. "It wasn't just X, it was Y", "This isn't just about X, it's about Y", "Let me dive in". If you see one of these, you know what to expect from the rest. It's confident and smart but it's completely empty. You can find it on Linkedin in every second post. 2000 characters twitter articles about nothing. Case Studies that could belong to any company. Social posts that sound like they were all written by the same person. Technically, they were. It always goes to the mean. You can blame AI for that, but you can not eliminate the fact that everyone will write with AI help. The problem is that you ask AI to write for your brand, but it doesn't know your brand or product. It doesn't know your voice, your values, what you'd never say. It knows everything about the internet and nothing about you. So how do you make AI think, write and sound like you? ## When Creation Is Easy, Distribution Wins Nowadays, it's so easy to create digital things. A website in a day. A blog post in an hour. Social content for a week in one sitting. Everyone has the same tools and everyone can make stuff. When creation becomes easy for everyone, the advantage shifts to distribution. How consistently you show up across every channel. Whether your LinkedIn post, your case study, your newsletter, and your proposal all sound like they came from one company or one person. Blog posts, social media, case studies, proposals, website copy, emails. All need the same voice, same quality. One person can not keep up with all of that. AI can actually help here. Now you can run multiple agents on different parts of your content: research, writing, social, client communications, all at the same time. You direct them, you review, you make sure the quality is there. Doing all of this by yourself is no longer productive. ## Your Agents Don't Know Who You Are You probably already have a brand guide. A PDF, a Figma file, maybe a design system. Looks great, the result of real work. Your agents can not read any of it. A PDF is for humans. An agent can technically scan the text, but it loses the structure, the context, the hierarchy. A Figma design system is even less accessible. All that brand knowledge you have is not visible to your agent. So every time an agent writes something for you it starts from zero. Not knowing your voice, without positioning, not knowing your guardrails. It produces the same generic output. It always goes to the mean. Agents understand code better than PDF. They need brand description in their language, structured files, markdown, YAML, things they can actually parse and use. Every brand now needs two guides: a visual guide in Figma for humans and a brand guide in code for agents. ## Brand Content System in Claude Code We built a brand content system in Company Directory on my Mac, next to all of our design files and client work. It's a separate folder with a markdown and YAML files. We structured it into five folders, each containing answers for agent about the brand. Each folder has a few files. Files covers one concept: our voice rules, our positioning, who we write for, what we never say, etc. Each has about 400 tokens. We found out that this is the perfect size for the file. Small enough to load several at once without eating up the agent's context window. Big enough that each file is self-contained. Every file has a bit of YAML metadata at the top, then the actual brand knowledge below. This is our voice definition: We have a file that lists what we never say. Banned words with reasons, banned phrases, specific AI patterns to catch: Claude Code loads a CLAUDE.md file at the start of every session. It says: "before any writing task, read these core files". How we sound. Who we are. What we never say. A blog post gets craft rules and the writing personality. A proposal gets services and the client persona. A style edit gets the constraints and the calibration pairs. We built skills on top of this, shortcuts that handle the routing automatically. Type /write-blog-post and the agent loads everything it needs: We also have personality files for the writing agent. It's separate from the brand voice. Personality defines how a specific person thinks and writes. We do this for ourselves and deliver it for every client project, be it brand or product. The human layer: Figma files, PDFs, design system, visual guidelines. And the agent layer: the brand content system folder. A client using Claude Code or Cursor drops the folder into their project and their agents immediately have voice, positioning, terminology, guardrails. The brand system lives in version control next to the code. When the brand evolves, you update the file and every agent picks up the change. ## Creative Directors Become Directors Content distribution by yourself does not scale. Blog posts, social media, case studies, proposals, emails. One person can not keep up with all of that. But now you can run several agents at the same time. One writes a blog post. Another drafts social for the week. A third reviews a client proposal. They all work using the same brand system and they all know your voice, your positioning, your values. They all sound like you. It works like directing a film. The director doesn't operate the camera, doesn't act in the scenes, doesn't edit every frame. But every frame reflects their taste because they set the rules and reviewed the output. This scales in a way that personal effort never did. One person directing that system produces more consistent output across more channels than a team of writers who never fully internalized the brand guide. And the quality actually gets more consistent. An agent loading the same brand files produces the same baseline every time. You elevate from there. Everyone writes with AI. That is not changing. But with a brand system loaded, your agents stop going to the mean. They know your voice, your values, what you would never say. They know everything about the internet and something about you. The brand content system covers how you sound. How you look is another problem we are focusing on now. A brand agent that can create high quality visuals for your brand and product. Stay tuned. Share: Discuss with ai: Copy: By Markiian Bobyliak Markiian is the founder and design director at Supermega Design. ================================================================ # Product Design with Claude Code > How we use Claude Code in product design. Prototypes, components, and the product itself as the design file. Claude Code thinks with me, not for me. - Page: https://supermega.design/product-design-with-claude-code - Markdown: https://supermega.design/product-design-with-claude-code.md - Published: 2025-10-02 - Site index for agents: https://supermega.design/llms.txt --- - The Design Process - Claude Code helps! - First — take the time to set up your system. - Next — synthesize your research and findings - Claude code can not design for you! - Check your work against design rules and principles - Find relevant examples quickly - Test the flows you have built - Document design decisions - Communicating design - Design system work - Agents, Agents, Agents As a designer, I can see that AI coding tools and generative solutions lack taste and craft, and taste and craft are what make products stand out. Lots of people think AI will replace designers, but they’re missing the point. The real opportunity isn’t in AI doing design work. It’s in AI amplifying your ability to think about design. It improves the speed and quality of your work. Like most designers, I was using AI tools for quick tasks brainstorming headlines, writing user stories, getting fresh perspectives on creative problems. Each tool had its strength: ChatGPT for speed, Grok for creative views, Gemini for data analysis. But Claude became my go-to for anything requiring deep, contextual thinking. Claude is great, but its web interface isn’t. Every conversation starts from scratch. I’d have to upload the same research files repeatedly and re-explain project context. It was like working with a brilliant colleague who has amnesia. I have been following Dan Shipper and his Every.to for some time now. I always liked their simple and clean writings and actionable advice. Some time ago he began to talk a lot about Claude Code and how it empowers him and pushes speed and quality of his work. He described Claude Code as fundamentally different from chat interfaces. They write code and build products. They are engineers. I’m a designer. I create experiences, not algorithms. Could Claude Code actually understand and enhance design work? I tried it and it was GOOD! Claude Code doesn’t just chat about your work, it lives with your work. I felt the difference right away. I created a Claude Code session within my design project folder. Figma files connected through MCP, Notion documentation via MCP, research documents in my folders, and my CLAUDE.md files with project context, Supermega Design Guidelines and project-specific guidelines. I asked: “Review the onboarding flow against our user interviews and stakeholder requirements”. Claude understood the entire context. It knew what users struggled with from the interviews. It knew what stakeholders prioritized from meeting notes. It saw how my current wireframes addressed or didn’t address these needs. My entire design process was working as one intelligent system. Smart and quick. ## The Design Process What does the work of a designer actually look like? First, you research. You look at what competitors are doing. You study different approaches. You analyze existing solutions to understand what works and what doesn’t. Then you design. This happens in two ways. Sometimes you’re working within systems, following patterns, maintaining consistency, using established components. Other times you’re being creative, innovating, solving problems in new ways, pushing boundaries. Then you communicate. A lot. You explain your decisions to stakeholders who care about business results. You present to clients who want to see their vision come to life. You work with developers and product managers who need to understand what you’re building. Then you iterate. New information comes in. Requirements change. Users react differently than expected. So you go back to research, back to design, back to communication. This cycle never stops. You’re doing all of these things at once, across multiple projects, all the time. The old way was difficult, time-consuming and pretty messy. Research was scattered across docs and folders. Designs in Figma. Communication on email, WhatsApp, Slack. Project context spread between email threads and Notion pages. Want to explain why you chose this design approach? Hope you remember which conversation that happened in. The tools worked fine individually. There was no unified design process that would amplify thinking and work. ## Claude Code helps! New way, Claude Code way is much faster and simpler. I like things simple, as a designer. So how designer can actually use Claude Code? ## First — take the time to set up your system. I like to start every project with project-level claude.md file. It can be different from project to project, but, generally, it contains relevant project info, our design philosophy and guidelines. You do not want to overcomplicate it and you should build it up as you move on with the project. There are tons of examples online, but I suggest creating your own. ## Next — synthesize your research and findings Within a project folder on my computer, I create one folder /research, and store everything in it. User interviews, competitor analysis, reports, stakeholder docs and explorations. Claude Code now has access to all. To help him navigate it, I modify claude.md file with instructions on where to find what and how to use it, etc. Claude Code will scan your files and find patterns and insights you may have missed. Make research cumulative. Every new insight adds to the system. Finished a user interview? Drop the transcript in the folder. Claude Code connects it to previous knowledge. In the last project after adding numerous research files. I asked “what are the one problem that users share”. It found the pattern I didn’t know existed. Claude also helps you do your research. The web version of Claude has those annoying limits. You hit usage caps right when you’re in the flow. With Claude Code, you don’t have those problems. I can upload dozens of research materials and analyze them all in one continuous conversation. No “context limit reached” messages. With direct file access, Claude Code reads directly from your research folders. ## Claude code can not design for you! I mean, it can, but it will be generic AI slop, so do not rely on it for actual designs. Instead, use it to design decisions smarter. ## Check your work against design rules and principles Every designer has a design philosophy, a certain style of doing things. It’s good to have it written down. Every project has its design rules and principles too and it’s good to define and write them down as well. Once you have these documented in your CLAUDE.md file, Claude Code can help you cross-check your designs against systematic principles. ## Find relevant examples quickly This one applies to bigger projects. I usually create a couple of moodboards for style and for design solutions. Now, through MCP, I can connect them to Claude Code and it “gets” the vibe and the style and design details that we want to achieve. Based on that, later in the project, I can ask questions like “What components should we use in this profile screen, to make users welcome and at home?”. Claude Code knows the references and can suggest solutions based on the actual mood boards, not generic best practices. It’s not always the best ideas, but it’s a quick access to ideas when you need them. ## Test the flows you have built Here’s where Claude Code becomes really useful for design iteration. After you build a flow, you need to test if it actually makes sense. Claude Code can walk through your designs with fresh eyes, and it’s not just a random tester, it knows your research and understands what users actually want. Claude catches edge cases I missed. “What if a user’s credit card gets declined on the last step? I don’t see an error state for that.” This isn’t testing with real users — that’s still essential. But it’s a quick way to catch obvious things before you get to real testing. ## Document design decisions The least exciting part of any project is explaining everything you did to the people who have to build it. Developers need technical specs. Product managers need a rationale. Future designers need context. Everyone needs something different. After I finish the designs, I tell Claude to create design documentation for developers. It can create a detailed description of what we build and why and how user is expected to use it. For future designers, Claude Code documents the design solutions and ideas we discovered. For product managers, it explains how design decisions connect to business goals based on our research and designs. This documentation actually stays useful because Claude understands the full context of your decisions, not just the final outputs. ## Communicating design I spend a lot of time explaining my design decisions. With Claude Code, I explain once, then it helps you communicate the same information to different audiences. Building client presentations used to eat up entire afternoons. Now I tell Claude Code: “Create content for slides about our research findings.” It pulls real quotes from user interviews, screenshots from competitor analysis, and metrics from our data. I just need to design it nicely. ## Design system work I build design systems in Figma and connect them to Claude Code through MCP. Now it can see every component, every variation. It can scan through actual screen designs when needed to spot inconsistencies. It can help you find what components are missing and how you can simplify your work with specific components. The real power comes when developers start building the components. This is where things sometimes go wrong, developers make small changes that break the design and overall feel of the product. Recently, I have started building out a components library in code myself. Claude Code helps me bridge the gap between design and development. Using MCP you can translate design to code pretty easily. It also helps developers stay consistent across the codebase. When they’re building new features, they can ask Claude: “What existing components should I use in this case?” Claude knows the design system and suggests the right components instead of letting developers create new variations. The design system stays unified instead of becoming two separate things — one in Figma, another in code. ## Agents, Agents, Agents Remember Steve Ballmer screaming “Developers, developers, developers!” at that Microsoft conference? That’s how I feel about agents in Claude Code. I can now run multiple agents, each focused on different parts of my design work. Research agent, writing agent, communications agent. I create and run agents based on specific project needs. Agents are not a panacea, but they are very good at specific tasks, like research, analysis, design systems. After months of using Claude Code, I’ve stopped thinking of it as an AI tool. It’s become part of my design process, like Figma or a sketchbook. The difference is that Claude Code thinks with me, not for me. The designers who will thrive aren’t the ones who resist AI or the ones who expect AI to do their work. They’re the ones who understand that taste, craft, and human judgment remain irreplaceable. What changes is how fast we can move from insight to solution, from problem to prototype. Claude Code doesn’t make you a better designer. It makes you a faster, more thorough version of yourself. But what matters most is that it gives you time back. Time you used to spend on documentation, you now spend exploring creative solutions. Time you used to spend explaining context, you now spend understanding users. Time you used to spend managing files, you now spend perfecting the details that make products memorable. The best products will still come from designers who care deeply about craft. Who “feels” that spacing feels off by two pixels. Who push back when the easy solution isn’t the right solution. Claude Code just means we can do all of that better, faster, and with less friction. Start simple. Pick one project. Set up your CLAUDE.md file. Connect your tools. Then watch how your design process transforms from scattered efforts into unified thinking. Share: Discuss with ai: Copy: By Markiian Bobyliak Markiian is the founder and design director at Supermega Design. ================================================================ # Put Users into a Different World > Games hold attention for hours, and most apps lose it in minutes. What products can borrow from games and worldbuilding. - Page: https://supermega.design/put-users-into-a-different-world - Markdown: https://supermega.design/put-users-into-a-different-world.md - Published: 2025-10-01 - Site index for agents: https://supermega.design/llms.txt --- - Apps that create worlds - Elements of Digital World Building I've been obsessed with a question lately: Why do games capture attention for hours while most mobile apps struggle to hold it for minutes? Most good games put you in the flow state, they disconnect you from your reality and put you into a different world. Every good game does it. Minecraft. Fortnite. CoD. Even simple games like Tetris or Candy Crush. Now think about most digital products. They don't create worlds. They create interfaces. Yes, email clients do not have to do it. I don't need my calculator app to transport me to Calculator Land. But wouldn't it be powerful if using a banking app made you feel the same trust and confidence as walking into a Morgan Chase Bank in Manhattan, with its soaring ceilings and attentive staff? Most consumer apps would benefit in a major way if they utilized some of the worldbuilding elements of games. Retention is the holy grail of consumer apps. And I think there's a lot to learn from games in this vector. According to industry data, the average app loses 77% of its daily active users within the first 3 days after installation. By day 30, it's 90%. Meanwhile, the best games keep 25-40% of users after a month. ## Apps that create worlds Let's take a look into products that do this well: Creative tools like Figma, Notion, and Midjourney can induce flow states where the interface fades away and you're just... creating. The reward cycle is immediate - make a change, see the result. This instant feedback loop creates the same dopamine hit that games provide when you level up or unlock an achievement. The best creative tools make you forget you're using software. Social media feeds create a world of endless content where you're constantly attacked with fast dopamine hits. They hook us but often lack the sense of progression that more complete digital worlds provide. Sport apps like Peloton and Strava don't just track workouts—they create communities, narratives, and challenges that make exercise feel like an adventure or game. But these examples are rare exceptions. Most apps don't think about interfaces in this way. If you are building a consumer product, you should. ## Elements of Digital World Building What makes a digital world that users don't want to leave? ### Visual Immersion Visual design is important. Design every screen and interaction to maintain the same aesthetic and personality. For apps, this means going beyond just consistent color schemes. Visual design must support the emotional experience you want your users to have. A focus and productivity app creates a sense of calm and clarity. A personal finance app conveys trust and professionalism. A learning app supports your journey in an inspiring and rewarding way. Headspace is a great example with its consistent, friendly animations and cohesive visual language that creates a sense of calmness and ease. ### Sensory-Rich Feedback Think beyond visual feedback. Create multi-sensory responses - sounds that confirm actions, haptics that reward completion, animations that celebrate achievement. These micro-moments of delight create emotional memory. Apple Pay combines animations, sounds, and haptic feedback to make the payment experience more physical and realistic. ### Progressive Discovery Games introduce mechanics gradually. Do not overwhelm users with features. Guide them. Open up features when the user needs them. Keep it simple and clear at first. Figma allows users to create basic shapes right away - it's pretty easy, everyone can do it. But once a user masters the tool, they discover sophisticated features (components, auto-layout, masks, variables) that enhance their creative process. ### Identity and Agency In games, the user is an active participant. The user creates their own story. User choices matter. Whether it's a post that thousands of people see, a custom profile, or rewards that they can share, you should strive to make users feel like creators and owners. Pinterest users build boards that become expressions of identity and vision. ### Coherent Rules Every world should have its logic. Your app world needs it too. Actions should lead to predictable consequences. A set of consistent rules that govern how everything works is very important. Todoist uses a consistent karma system where completing tasks earns points in predictable ways. ### Emotional Connection The best worlds make users feel something. These emotions are what bring users back. The frustration of a difficult level makes the eventual victory sweeter. Shared experiences of overcoming challenges help create bonds between users. BeReal generates authentic connections using a simultaneous photo-taking feature that creates shared moments. Consumer apps can learn a lot from games without becoming games themselves. Product builders should adopt the psychological principles and rules that make games so engaging. When designing a product, think about how you'd like the user to feel and the world you'd like the user to enter. Create experiences that respect users' time and attention by making that time more meaningful and enjoyable. Even the most utilitarian apps can benefit from considering the emotional journey of their users. The most successful apps of tomorrow won't just solve problems—they'll create worlds that users want to return to again and again. Share: Discuss with ai: Copy: By Markiian Bobyliak Markiian is the founder and design director at Supermega Design. ================================================================ # The Design Process: Passion Pixels AI > Designing Passion Pixels, an AI career companion that feels like a game you can't stop playing. - Page: https://supermega.design/design-process-passion-pixels-ai - Markdown: https://supermega.design/design-process-passion-pixels-ai.md - Published: 2025-10-03 - Site index for agents: https://supermega.design/llms.txt --- - The problem - Understanding the audience - Visual direction - Design - The Product At Supermega, we’ve been designing a lot of consumer products lately. More consumer founders keep reaching out. There’s a pattern: they’re building AI-first products but don’t want them to feel like AI tools. They want experiences that feel alive. Products people want to use, not have to use. Passion Pixels was one of these. An AI-powered career discovery platform that helps people find their path through conversation, not questionnaires. When the brief landed, I knew this would be different. Career assessments are usually boring forms with multiple-choice questions. “Rate yourself 1–5 on leadership.” Nobody wants that. We needed to make career discovery feel like a game you can’t stop playing. ## The problem Traditional career assessment tools treat finding your path like filling out paperwork. Passion Pixels wanted to flip this. Their AI agent, Pixel, discovers your ideal career through natural conversation. But they needed the interface to match that ambition. The challenge: Create an engaging, dynamic experience that evolves with users while providing meaningful, actionable insights. Make career discovery feel less like work and more like exploration. Also, they needed to stand out. Every AI product looks like ChatGPT with different colors. This one had to be different. ## Understanding the audience Early on, we understood Passion Pixels wasn’t for recruiters or HR departments. It’s for people at crossroads. College students who are figuring out majors. Professionals who are considering career changes. Anyone asking “what should I do with my life and how can I do it?” These aren’t people looking for quick answers. They’re looking for clarity and direction. Someone who can listen and communicate with them. The AI agent needed personality. The interface needed to feel like a place you want to return to. A companion, not a questionnaire. ## Visual direction We presented four visual concepts: **Concept 1: Minimal & Experimental** Clean interfaces. Neutral colors. **Concept 2: Bright & Happy** Lots of colours and funny icons. Playful but risks feeling too childish for serious career decisions. **Concept 3: Plain & Simple** Editorial layouts. Clear information hierarchy. Professional but forgettable — lots of similar-looking tools in the space. **Concept 4: Immersive & Imaginary** Video-led worlds. Visual storytelling over text blocks. Makes career discovery feel like entering a different space. ## Design We knew that pixel art, kind of Pac-Man style UI won’t work perfectly for a modern AI tool. While functionally it may have worked, the feeling it was giving was way too much on the game side. It did not feel like a tool that could help users with important life choices. So we knew we needed to balance aesthetics with modern UI. Users shouldn’t have to learn new patterns just to type a message or navigate screens. We had to find the right balance between playful with trustworthy. ## The Product **Conversational Discovery** When the user opens Passion Pixels, you meet Pixel. Not a chatbot. A character with personality. The AI learns your communication style as you talk. Asks follow-up questions that feel natural. Discovers your traits and skills through conversation, not assessment questions. Profile builds itself. The user just talks about what matters. **Smart Tracking** Unlike static assessments, your profile evolves. Each conversation reveals more patterns. Skills surface naturally. Interests become clear over time. The interface shows this evolution visually. Traits appear as discoveries. Skills level up. It makes using the app feel like progress. And feeling of progress is one of the most rewarding feelings. **Career Pathways** Once Pixel understands you, career suggestions appear. Each suggestion explains why it matches. Includes day-in-the-life scenarios. Shows skills you have and skills you need. Provides next steps to explore. **Action Framework** Beyond discovery, you get a path forward. Structured plans. Learning resources. Progress tracking. Career discovery doesn’t have to be boring. Nothing has to be boring if you care about how it feels. Contact us at [mark@supermega.design](mailto:mark@supermega.design). We are happy to discuss your product and ideas. Share: Discuss with ai: Copy: By Markiian Bobyliak Markiian is the founder and design director at Supermega Design.