The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Fresh UI. Smarter Shopping. šāØ
Redesigned this grocery eCommerce website with a clean, modern interface focused on better usability, stronger visual hierarchy, and a seamless shopping experience. Every section was crafted to improve engagement and make online grocery shopping faster and more enjoyable.
š Available for UI/UX, Web & Mobile App Design Projects.
š Book a call: https://calendly.com/gopi-uiux/30min
š Dribble: https://dribbble.com/OptimityLogics
š Behance: https://www.behance.net/optimitylogics
š Portfolio: https://gopi-prajapati-portfolio.vercel.app
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I built a virtual Ikebana experience. It's called Project: Ikebana. šø
It's the first time I've ever built something with gesture controls, worked with 3D assets, and vibecoded this much with Figma Make.
Try it here!
Ikebana is the traditional Japanese art of flower arranging. It literally translates to "giving life to flowers."
Project: Ikebana is my attempt to bring that idea into a digital space.
You can create floral arrangements in both 2D and 3D, using either hand gestures or traditional mouse controls.
The part I love most: the little moments of whimsy.
Sliding Japanese fusuma doors.
Tiny kaomojis q(ā§ā½ā¦q).
Petal-shaped gesture tracking markers.
This project started with a bunch of moodboarding into FigJam board, grew through 100+ make iterations, and somehow led me into learning 3D workflows, gesture interactions, databases, debugging, and a whole lot more.
I used Weave to create many of the visual assets and models, then brought everything together in Figma Make with Supabase powering the project's content library.
I love how tools like Weave and Make encourage you to focus on what something should feel like, not just how to build it.
If there's one thing I'd love people to take away from this project:
Try something new.
You might surprise yourself.
(ā§āā¦)ļ¾
This is honestly so beautiful and elegant! I love the concept a lot and you have brought it to life so well :)
ā³ļø š¦šøš¶š¹š¹ šššš²šššŗš²š»š š š®ššæš¶š
& š„š¼š®š±šŗš®š½ ššš¶š¹š±š²šæ š³š¼šæ šš²šš¶š“š»š²šæš
Skill Assessment Matrix is a SaaS designed to help Product Designers and UI/UX Designers better understand their current level, identify their strongest skills, and build a personalized growth roadmap
The idea came from a problem I experienced early in my career:
"šš¤š¬ šš¤ š š š£š¤š¬ šš š'š¢ š š
šŖš£šš¤š§, ššš-š”šš«šš”, š¤š§ ššš£šš¤š§ šššØššš£šš§?"
This first version is focused on the desktop experience and was designed as the foundation for a larger SaaS product
š£š„š¢šššš
Designers often struggle with:
ā¦ Understanding their current level
ā¦ Identifying their strongest skills
ā¦ Knowing what to improve next
ā¦ Creating a clear career growth plan
š¦š¢ššØš§šš¢š”
Skill Assessment Matrix helps designers answer three simple questions:
ā¦ Where am I today?
ā¦ What are my strongest skills?
ā¦ What should I focus on next?
The product guides users through a complete career planning flow:
š¦šš²š½ š [Career Goals Setup] Users define their career goals and desired direction
š¦šš²š½ š® [Self Assessment] Users evaluate their current skills across multiple competency areas
š¦šš²š½ šÆ [Summary] The system generates a personalized overview highlighting strengths and growth opportunities.
š¦šš²š½ š° [Roadmap Builder] Users receive a personalized roadmap and can further customize it by adding their own skills
š¦šš²š½ š± [PDF Export] The final roadmap can be exported as a PDF and used as a practical career development plan.
ā”ļøThis roadmap generation and export flow became one of the most valuable features of the projectā”ļø
š„šš¦ššš„šš šš¢šØš”ššš§šš¢š”
This project is based on more than 5 years of research intoĀ Skill assessment frameworks. The primary foundation for this work was the Figma Community Skills Matrix documentation, supported by dozens of additional public frameworks
š š„š²šš²š®šæš°šµ š„š²šš¼ššæš°š²š: https://docs.google.com/document/d/1FKjUpq0b4CnN_yrVx3NBB_xVMWZZBH6Ts9Gg9NU182A/edit?usp=sharing
šŖššš§ šŖšš¦ š§šš¦š§šš
ā¦ Figma AI Agent for generating new interfaces
ā¦ Figma Make for transforming designs into interactive product flows
ā¦ Combining a custom design system with generated product experiences
ā¦ Building complex multi-step user journeys inside Figma Make
ā¦ Creating SaaS-style product logic without traditional development workflows
š§š¢š¢šš¦ šØš¦šš
Figma ā¦ Figma AI Agent ā¦ Figma Make ā¦ MCP Servers
š š£š„š¢šššš§ ššš”š: https://meta-poet-59855448.figma.site
š šŖš¢š„š šššš: https://www.figma.com/make/T68isMdbSqZHrBrhLxpoXP/Designer-Career-Levels?t=MhG5fOhpNgHEIEEx-1
š šššš š šš¢š š šØš”šš§š¬: https://www.figma.com/community/file/1649639588397334446/skill-assessment-matrix-roadmap-builder-makeathon-submission
š„ Watch the video to see the full design process and how the project was built
š š©šššš¢: https://youtu.be/S3q38_kpTXo
šš¢ššššš¢š„šš§š¢š„š¦:
Special thanks to @Illia Skliarov for contributing to the creative process, design discussions, design, brainstorming sessions, and product thinking throughout the project.
š¦šØš£š£š¢š„š§ (ć£āā”ā)ć£
Please like, comment, share, or save this project to help more designers discover it ā¤ļø
š š¦š¢šššš š šššš š£š¢š¦š§: https://www.instagram.com/reel/DZwXAvhoMHA/?igsh=MWpmZGRwYmx0Y2lwdA==
š š¦š¢šššš š šššš š£š¢š¦š§: https://www.linkedin.com/posts/oleksandra-marchenko-1a3845183_uiux-product-designer-career-levels-from-share-7473607549641154560-EnNK/?utm_source=share&utm_medium=member_desktop&rcm=ACoAACtfdssBweyK9h-szJtXgRq5qAWGe9C9ktk
Love this
Design System Gen
A tool for rapid client project kickstart ā built with Figma Make + Claude API
The Problem
Every new client project starts the same way.
You receive a moodboard, some references, maybe a Pinterest link. You're expected to build something consistent ā across Figma Make, Cursor, Claude ā but there's no real foundation yet. No tokens. No rules. No shared context between tools.
Most designers spend hours on setup before writing a single prompt. I got tired of doing that. So I built a tool to eliminate that stage entirely.
What It Does
Design System Gen turns a client moodboard into a ready-to-use design system foundation ā in one click.
Upload the client's references ā the tool analyzes them across 8 dimensions:
Palette / Mood/ Typography/ Composition/ Lighting/ Texture/ Motion/ UI DNA
Hit "Apply all to form" ā the entire design system form fills automatically.
Then generate. You get 11 files, each tailored to a specific AI tool:
File:
figma-make.md For Figma Make Full design system context ā paste once, build everything in Make
design-system.css Any project All tokens as CSS custom properties, ready to import
tokens.json Figma Variables W3C Design Tokens ā import directly to Figma Variables
starter.tsx React / Next.js React component starter with all tokens already bound
cursorrules Cursor Cursor AI rules ā drop in root, it knows your design system
Claude.md Claude Projects Claude reads it automatically every session
DESIGN.md Documentation Human-readable design decisions and rationale
llms.txt Any LLM Machine-readable brand context, like robots.txt but for AI
components-api.md Dev reference Component props, variants, and usage documentation
prompts.md All AI tools Ready-made prompts for every AI tool in your stack
web-skills.md Component library in vanilla HTML/CSS ā buttons, cards, modals, nav
Every tool gets its own customized kit ā tokens, rules, prompts ā all consistent with each other. Not one generic output. A separate file per tool.
Figma Make Integration
In Figma Make: add two files at the start of a session and you're ready to build immediately.
Because the design system context is already loaded ā Figma Make knows your colors, tokens, spacing, component rules ā your prompts stay minimal. No need to re-explain the design system every time. You spend a fraction of the tokens you normally would.
A full landing page ā generated in a single run, with remarkably few tokens spent per prompt.
No back and forth. No prompt engineering from scratch. The context file already did that.
How It Was Built
Built entirely in Figma Make + Claude.
Published as a live web app via Figma Make publish ā vibecodingdsgen.figma.site
Powered by Claude API.
Claude processes the uploaded moodboard and returns structured output ā design parameters, tokens, and prompt sets ā all formatted specifically for each target tool.
Output connects directly to Figma Variables.
W3C Design Token format and can be imported into Figma Variables in three ways: via Tokens Studio plugin, through a Figma Make prompt, or using a custom Figma plugin ā for teams who want full control over the import flow or one special file
The entire tool ā UI, logic, API integration, file generation ā was built and shipped inside Figma Make. No external hosting. No separate codebase.
Why I Built This
Speed ā rapid kickstart for every new project, starting from the client's own references, not templates.
Consistency ā every AI tool in your stack speaks the same design language from day one.
Predictable output ā a base that only needs refinement, not rebuilding.
Token efficiency ā a full landing page was generated in a single run.
The tool is fully live ā you can explore the demo without any setup.
Want to generate your own design system? Add your Claude API key directly in the tool and try it with your own moodboard. The full generation takes 3ā4 minutes and produces all 11 files ready to use.
Linkedin
https://www.linkedin.com/posts/nataliatrusova_config-figma-share-7473584710724808704-YUVK/?utm_source=share&utm_medium=member_android&rcm=ACoAAAvbQN8B6uwRcvk-lCjSLHX3BLh7LL2LS0Y
#ConfigMakeathon #FigmaMake #DesignSystem #VibeCoding #ClaudeAPI
This tool uses a connection model nobody seems to write about. There are currently three ways Claude connects to Figma: via MCP server, via Figma's built-in AI, and ā what I built here ā a React app running inside Figma Make that calls the Claude API directly from the browser....
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. Whatās yours right now?