# Ege Beşe > Notes, build logs, and tool reviews. Software I build, design choices I make, and things I learn out loud. Public Ghost content for AI and LLM tooling. This file includes a bounded export of public pages first, then recent public posts. Append `.md` to any post or page URL to get the content in Markdown (for example, `/example-post.md`). ## Pages ### Hakkımda URL: https://egebese.com/hakkimda/ Last updated: 2025-03-24T07:12:53.000Z Merhaba, ben Ege. 4 yıldır UI/UX Tasarımcı olarak profesyonel hayatıma devam ediyorum. Bu blog, tasarım yolculuğumun ve öğrenme serüvenimin bir yansıması. --- ## Blog Hakkında Bu blogda amacım, tasarım dünyasında edindiğim bilgileri, deneyimlerimi ve deneylerimi sizlerle paylaşmak. UI/UX tasarımının inceliklerinden, projelerimde karşılaştığım zorluklara ve bunları nasıl aştığıma kadar geniş bir yelpazede içerikler bulacaksınız. Sadece tasarımla sınırlı kalmayıp, profesyonel yolculuğumda öğrendiğim genel bilgileri ve hayata dair gözlemlerimi de burada paylaşacağım. Bazen bir tasarım trendinin derinlemesine analizi, bazen bir proje sürecinde yaşadığım deneyimler, bazen de bir tasarımcı olarak kişisel gelişimime katkı sağlayan alışkanlıklar - tüm bunları samimi bir dille aktarmayı hedefliyorum. --- ## Ne Bulacaksınız? - **Tasarım İncelikleri**: UI/UX alanındaki teknik bilgiler, ipuçları ve en iyi uygulamalar - **Proje Deneyimleri**: Gerçek projelerde yaşadığım süreçler ve çıkardığım dersler - **Tasarım Deneyleri**: Yeni teknikler ve araçlarla yaptığım denemeler - **Framer Geliştirme**: Framer ile ilgili öğretici içerikler ve şablonlar - **Kişisel Gelişim**: Bir tasarımcı olarak büyüme yolculuğumda öğrendiklerim Bu blog, hem tasarım alanında yeni olan kişilere ilham vermek hem de deneyimli tasarımcılarla fikir alışverişinde bulunmak için bir platform olacak. --- ## Benimle İletişime Geçin Blogdaki içerikler hakkında görüşlerinizi, sorularınızı veya işbirliği önerilerinizi duymaktan mutluluk duyarım. - **Web:** [egebese.com](https://egebese.com/) - **Blog:** [blog.egebese.com](https://egebese.com/) - **E-posta:** [egebese@gmail.com](mailto:egebese@gmail.com) - **LinkedIn:** [egebese](https://linkedin.com/in/egebese?ref=egebese.com) - **X:** [designbyege](https://x.com/designbyege?ref=egebese.com) ### İletişim URL: https://egebese.com/iletisim/ Last updated: 2025-03-25T07:45:05.000Z Benimle herhangi bir konuda iletişime geçmek isterseniz aşağıdaki iletişim kanallarını kullanabilirsiniz. İsminiz Eposta adresiniz Buraya yazacağınız eposta adresinizden size geri dönüş yapacağım. Mesajınız Ne ile ilgili görüşmek istiyorsunuz? Gönder ### About URL: https://egebese.com/about/ Last updated: 2026-05-22T08:35:25.000Z I'm Ege. I'm a Creative Engineer at [fal.ai](https://fal.ai/?ref=egebese.com), where I sit between design and engineering and try to make those two worlds talk to each other a little better. This site is where I write things down. Posts about software I build, design choices I make, and tools I'd recommend to someone else doing similar work. ## What you can expect here - **Build notes.** Walkthroughs of side projects, what I tried, what worked, what didn't. - **Tool reviews.** Honest takes on the design and dev tools I actually use, not the ones I get sent. - **Workflows.** How I move work through Figma, Cursor, and a small stack of CLI tools every day. - **Occasional essays.** Short pieces on the parts of the job that don't fit a tutorial. No spam, no clickbait, no AI-generated filler. If you can find that elsewhere, that's a feature. ## How I work I default to writing things down before doing them. Most posts here start as a paragraph of intent for myself, become a short experiment, and then turn into an essay only if the experiment actually shipped. > Every constraint you accept early to ship faster is a constraint you negotiate with for the rest of the project. That sentence comes back to bite me on most projects, so it's worth keeping near the top of this page. ## Newsletter There's a subscribe form near the top of the homepage. Subscribers get every post in their inbox, no extras. You can unsubscribe with one click any time. ## Find me elsewhere - X: [@egebese](https://x.com/egebese?ref=egebese.com) - GitHub: [@egebese](https://github.com/egebese?ref=egebese.com) - LinkedIn: [@egebese](https://linkedin.com/in/egebese?ref=egebese.com) - Instagram: [@ege.bese](https://instagram.com/ege.bese?ref=egebese.com) If you're working on something AI- or design-tooling adjacent and want to compare notes, the inbox is open. The fastest path is a DM on X. --- Thanks for being here. If something on this site was useful, the best feedback is sharing the post with one other person who'd find it useful too. ### Welcome URL: https://egebese.com/welcome/ Last updated: 2026-05-22T08:48:32.000Z You subscribed to the newsletter. Here is what comes next. _This post is for subscribers only._ ### Welcome to the Inner Circle URL: https://egebese.com/welcome-circle/ Last updated: 2026-05-22T08:48:32.000Z For Supporters. Members-only posts, comments, and early access to projects. _This post is for paying subscribers only._ ### Stack URL: https://egebese.com/stack/ Last updated: 2026-05-22T19:26:55.000Z _No content available._ ## Posts ### Bring your Figma designs into Cursor with the Figma MCP, without writing code URL: https://egebese.com/cursor-figma-mcp/ Last updated: 2026-05-22T07:19:12.000Z I am a designer. Beyond a little PHP, HTML, and CSS from a long time ago, I have no real programming background. I definitely do not have the skills needed to build what I am building these days. Then one day a hero arrived. Its name is Cursor. The idea of coding with AI without knowing how to code has been around for a while, but a lot of people still have not tried it. I had been aware of it for some time, but I only really started using it about two months ago. I track everything on GitHub. ![GitHub activity overview](https://cdn.synaps.media/egebese/content/images/2025/03/CleanShot-2025-03-22-at-21.30.53@2x.png) Pretty much every day since then I have been spinning up some AI coding agent and trying to make something with it. Tools I have used in that stretch: - Windsurf - Lovable - Bolt - Cursor They each aim at different things. With Lovable and Bolt you can ship real software without knowing the first thing about programming. Windsurf and Cursor are a small step beyond, but really that step is less about programming and more about knowing how software actually runs and which environments to use. And that gap keeps narrowing. You can now do, inside Cursor with the right MCPs, the kinds of things you used to need Lovable for. For example, there is a service called Supabase. Remote database, auth, all that. Lovable used to handle it for you automatically. Now, with the Supabase MCP, Cursor can do the same. ![Cursor + Figma MCP output](https://cdn.synaps.media/egebese/content/images/2025/03/figma-mcp-cursor-ciktisi.jpg) ## What is the Model Context Protocol (MCP)? The Model Context Protocol (MCP) is an open standard designed to let AI assistants connect seamlessly to a variety of data sources and have context-aware interactions. (Microsoft) Through MCPs you can hook a long list of tools into Cursor and use them right inside the editor. ## What is the Figma MCP? The Figma MCP lets AI-powered coding tools like Cursor, Windsurf, and Cline read your Figma design files. When Cursor can access actual Figma design data it is dramatically better at translating designs into code in one pass than approaches like pasting screenshots. Because the MCP exposes the underlying CSS of every element, the assistant can see font details, color values, shadows, borders, and so on directly. Imagine you have designed a button and you want to hand every visual detail to Cursor. You could feed it a screenshot, or describe each property step by step. Both are slow, expensive in credits, and inconsistent. ![Figma MCP design extraction](https://cdn.synaps.media/egebese/content/images/2025/03/CleanShot-2025-03-24-at-19.07.11@2x.png) With the Figma MCP you copy the frame link and that is it. Far more consistent, far less friction. --- ## How to set up the Figma MCP in Cursor ### Prerequisites - A Figma account (the free tier is enough). - Cursor IDE (you can try it inside the free limits, but a subscription is needed for serious use). ### Get a Figma API token 1. Open the Figma UI. 2. Click the notifications icon. 3. Click the settings icon on the right of the panel that opens. 4. Click "Security" on the right of the next panel. 5. Scroll down to "Personal Access Tokens". 6. Click "Generate new token". 7. Give the token a name and expiry, then click Generate Token. 8. Copy the token somewhere safe. Figma may change this UI; if it has, check the Figma docs. 0:00 /0:11 1× Generating a Figma personal access token. ### Run the Figma MCP locally 1. If you do not already have it, install Homebrew via your terminal: ```bash /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` 1. After Homebrew, install Node.js if it is not already installed: ```bash brew install node ``` 1. Then run the figma-developer-mcp package, replacing the placeholder with your real Figma API token: ```bash npx figma-developer-mcp --figma-api-key=YOUR_FIGMA_TOKEN ``` So the full command should look something like: ```bash npx figma-developer-mcp --figma-api-key=abcd-efgh-1234-xyz ``` --- ### Wire the MCP into Cursor Once the MCP is running in your terminal, plug it into Cursor: 1. Open Cursor. Top-right menu → Cursor → Settings → Cursor Settings. 2. Click "MCP", then "Add new global MCP server". 3. Paste the JSON below into the editor. Replace the API key placeholder with your Figma token. 4. Save with Cmd + S and close the page. ```json { "mcpServers": { "Framelink Figma MCP": { "command": "npx", "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_FIGMA_TOKEN", "--stdio"] } } } ``` 0:00 /0:11 1× Adding the Figma MCP to Cursor. --- ## How to actually use it Once the MCP is live in the terminal and registered in Cursor, the workflow is dead simple: 1. Send a message like: "I want you to implement this Figma design at 100% fidelity: " 2. Wait for the response. 3. Review the result and follow up with whatever it missed. 0:00 /0:11 1× Asking Cursor to implement a Figma frame end-to-end. Getting good results from the Figma MCP takes a little care. Some things it will not do well on its own: ### Watch out for - **Vector assets are not exported.** If you are using vector illustrations, export them to PNG or JPG inside Figma first and reference those. - **Very large pages overflow the context.** A long landing page or a dense dashboard frame can be too much, especially for default Sonnet 3.5\. For very large designs, pick a model with a bigger context window like Sonnet 3.7 Max. That model is more capable, but it also burns more credits. ### My recommendations - Whole-page conversions rarely come out clean on the first pass. Cursor struggles with the sheer number of components. If you must do the whole page in one shot, be patient and refine in chunks afterwards. - Component-by-component is the approach I recommend. For a landing page, do the hero, then the next section, and so on. For a dashboard, do the shell first, then each card. It is the most reliable way to keep quality high. --- ## Result ![Final Figma MCP output](https://cdn.synaps.media/egebese/content/images/2025/03/CleanShot-2025-03-24-at-19.21.55@2x.png) ![Side-by-side comparison](https://cdn.synaps.media/egebese/content/images/2025/03/CleanShot-2025-03-24-at-19.30.06@2x.png) ## Closing The Figma MCP is a real step forward for AI-assisted coding. Even without a software background, designers can take real projects from idea to production. The Cursor + Figma integration makes the design-to-code handoff dramatically simpler. These tools keep getting better; I will keep experimenting and writing up what I find. Share your own experiments too. ### What a UI kit is and how to use one to ship 5× faster (with a free UI kit) URL: https://egebese.com/ui-kit/ Last updated: 2026-05-22T07:19:11.000Z I wanted my very first blog post to be something genuinely useful. So I decided to share, as a designer, how I deliver design work faster. When I first started I already knew about UI kits, but I had no idea how to use them well. The point of this post is to explain how you can use a UI kit correctly while still keeping your designs feeling original. --- ## What is a UI kit? **A UI kit** is, at its core, a design file that bundles together many design components, things like buttons, form inputs, table patterns, and so on. Most kits live in Figma. The components inside are wired to typography styles and color palettes from the same file. So if the kit ships with "dark blue" as its primary and your brand is pistachio green, you can swap every primary surface, every shadow, every border and every text color in the whole file with a single click. The same applies to fonts. > In short, with a five-to-ten minute pass over fonts and colors you can have every element you need for the entire project ready automatically. 0:00 /0:11 1× Changing every color in a Figma UI kit with a single click. --- ## UI kit vs. design system **A UI kit** is basically a collection of ready-made design components (buttons, forms, tables, etc.). The components inside a Figma kit are wired together with typography and color palette libraries. **A design system** is broader. It covers the components, of course, but also the design principles, brand rules, UX guidelines, and coding standards. It is the living system that keeps a company's digital products consistent over time. > A UI kit answers the "what" (which components do we use). A design system also answers the "how" and the "why" (how and when do we use these components). ![UI Kit vs Design System comparison](https://cdn.synaps.media/egebese/content/images/2025/03/UI-kit-vs-design-system-2.png) UI Kit vs. Design System --- ## Why use a UI kit When you make UI kits part of your design process you gain in several ways: efficiency, speed, consistency, and saved time downstream in development. Specifically: ### Faster design loops The single biggest thing a UI kit does is stop you from reinventing the wheel. In four years of design work, the thing I have enjoyed least is redrawing the same form inputs over and over. They are all slight variations on each other and rebuilding them every time burns real time. Starting from a brand-appropriate UI kit makes that part trivial. Swap colors, typography, and border-radius and you can have a full component set ready in minutes. ### Brand consistency Consistency is one of the most important things in a design project. Users should feel the same rhythm as they move from one screen to the next. Feeling like you have wandered into a different site, or losing brand identity on the way, is a bad outcome for both the user and the product owner. ### Easier team collaboration If you are not the only designer on the project, handing the next designer a working component library both makes their job easier and protects brand consistency. ### Less work for engineers If you tailor a UI kit to your project before you start designing, you can hand it to your engineer at the same time so they can start in parallel. While you are designing pages, they are turning the components into code. On time-constrained projects this is the difference between hitting a deadline and missing it. --- ## The trade-offs to know about It is not all upside. UI kits come with their own pitfalls. ### They can flatten your creativity The most common criticism of UI kits is that the convenience comes at the cost of creativity. That is fair. Cranking out solid designs quickly can crowd out the spark. Even when the structure is different, the output can start to feel templated. I felt this a lot early on, less now. > If a client shares references that all use single-color backgrounds, subtle brand accents, and a noise texture, using Material UI to draw flat white cards on flat colors is clearly the wrong call. You either tailor the kit to the client direction or add the missing designer touch on top of it. ### Project-specific needs If your plan is to use nothing but the components inside a UI kit, save your money. A design exists to solve a problem; the surface you ship has to be specific to that problem. A UI kit cannot do that for you. > A modal box from a UI kit gives you the blur and the panel shell. Everything inside that panel still has to be designed by you. That is not a bug, that is the point. --- ## How to pick a UI kit There are literally hundreds of UI kits out there, some priced at $100+. So how do you pick? I follow a small handful of rules. I do not buy every kit. I do not buy a project-specific kit when I already own a comprehensive one. And I do not buy a kit just because it has everything. > The list below is ordered from most to least important for me. ### How long the kit has been around Brand new kits tend to lean into whatever the current design trend is. That is the single thing I watch out for most. A kit that drops today and leans hard into the current trend is a bad long-term investment. ![Neumorphism style example](https://cdn.synaps.media/egebese/content/images/2025/03/neumorphism-trendi-ui-tasarim.jpg) A neumorphism-style design language. My preference is a kit with a quieter visual language, like: ![Clean UI kit example](https://cdn.synaps.media/egebese/content/images/2025/03/image.png) Older kits also tend to have a more established community and evolve along with that community's needs. The kit designer is making safer, more tested decisions. ### How customisable it is As I said above, I avoid kits that are tightly coupled to a specific trend. I prefer a kit with simple, neutral elements that I can customise into whatever the project needs. > The point of a UI kit is not to ship the final design as-is. The point is to avoid rebuilding the same building blocks from scratch every time. ### Update cadence A kit that updates too often is bad. A kit that never updates is also bad. The sweet spot is a kit that ships large, deliberate updates a few times a year. Constant updates make your local library go stale and chasing them is exhausting. > When I bought my favourite kit, Untitled UI, it was on v4\. A few months later Figma shipped variables and tokens. The kit caught up to that change in about a month with a clean v5 release. That is the cadence I want. --- ## Premium UI kits worth paying for I will only recommend kits I have actually used. The order below is my personal preference, not a definitive ranking. ### Untitled UI My top pick, and the one I reach for most often. If I could only own one kit, this would be it. Solid file structure, deep component library, a visual language I like, a healthy update cadence, and years of refinement. The one kit I can recommend without caveats. [Untitled UI — Figma UI Kit and Design SystemUntitled UI is the largest UI kit and design system for Figma in the world. Kickstart any project, save thousands of hours, and level up as a designer.![](https://cdn.synaps.media/egebese/content/images/icon/6708848510bc3d367ad6d289_favicon-32px.png)Untitled UI![](https://cdn.synaps.media/egebese/content/images/thumbnail/670882dce1405042afd743ec_929e06a464c62330cf85f175c072fd60_untitled-ui-open-graph-img.webp)](https://www.untitledui.com/?ref=egebese.com) ### SegmentUI A kit I reach for when I am working in Framer. Simpler than Untitled, but if you do anything in Framer it will speed up both your design and your build. The "custom Framer code components" library in particular is excellent. If you only get to pick one kit and you live in both Framer and Figma, this is the one. [Free Resources, Components & UI Kits for Framer & FigmaSegmentUI is a 360-degree solution for Framer and Figma. The ultimate design resource that covers everything from ideation to monetisation. Free UI kits, templates, design systems, components and custom code generators.![](https://cdn.synaps.media/egebese/content/images/icon/mFyfqomzD8KEi8lZPvsm5xEF4l8.png)SegmentUI![](https://cdn.synaps.media/egebese/content/images/thumbnail/FHedkJ6pPwqIElKtJfkhAs2pQ0.png)](https://www.segmentui.com/?ref=egebese.com) ## Best free UI kit There are thousands of free options. As a starting point for any project I would still recommend the free version of Untitled UI. The free version alone is better than most paid kits. Not much to say beyond that, it is free, just grab it: [FREE Figma UI kit and design system — Untitled UIDownload the FREE version of Untitled UI, the #1 design product on Gumroad with 2,200+ five-star ratings.Untitled UI![](https://cdn.synaps.media/egebese/content/images/thumbnail/73376d5d-856c-49f7-8af5-a57c07115f78.jpg)](https://www.untitledui.com/free-figma-ui-kit?ref=egebese.com) --- ## Closing UI kits make a designer's life materially easier. I have seen this directly in my own work, more time saved, more consistency in the output. It is true that they can feel like a constraint at first (they felt that way to me too), but with time they stop feeling like restrictions and start feeling like accelerants. The most important thing is to pick a kit that matches your project and your needs, and to treat it as a starting point. Avoid reinventing the wheel; lay down the base structure with the kit, then layer your own design choices on top. That is how you ship designs that are both efficient and original. > A good UI kit does not limit you. It buys you the time you need to be more creative.