Geliştirici Araçları

Renk Paleti Oluşturma

warningProblem

"Built a color palette browser with live UI previews because I was tired of guessing how colors would actually look"

psychologyPotansiyel Çözüm

Renk paleti oluşturma ve UI tasarımında kullanma sürecini kolaylaştıran, ekip çalışmasını destekleyen ve ilham verici kaynaklar sunan bir web uygulaması.

groupHedef Kitle

Web tasarımcıları, UI/UX tasarımcıları, grafik tasarımcıları, pazarlama uzmanları, startup kurucuları ve web geliştiriciler. Bu kişilerin demografik özellikleri genellikle 22-45 yaş aralığında, teknolojiye yatkın ve görsel tasarıma önem veren kişilerdir. Harcama güçleri değişkenlik gösterse de, profesyonel araçlara bütçe ayırmaya isteklidirler. Özellikle serbest çalışanlar ve küçük ajanslar, maliyet etkin çözümlere daha fazla ilgi duyarlar. Pazar büyüklüğü, dünya genelinde milyonlarca potansiyel kullanıcıyı kapsamaktadır.

paymentsGelir Modeli

Freemium model: Ücretsiz sürümde sınırlı sayıda palet kaydetme ve paylaşma imkanı sunulur. Premium abonelik ile sınırsız palet kaydetme, ekip işbirliği özellikleri ve gelişmiş analizler (örneğin, paletin popülerliği, kullanım alanları vb.) sunulur. Aylık 9.99$ veya yıllık 99.99$ abonelik ücreti belirlenebilir.

Aksiyon Planı

Canlı UI önizleme özelliği ile renk paletlerini farklı UI bileşenleri üzerinde (butonlar, navbar, formlar vb.) görselleştirme.

WCAG uyumlu erişilebilir renk paleti önerileri sunma.

Kullanıcıların kendi renk paletlerini oluşturup kaydetmelerini ve paylaşmalarını sağlama.

Popüler tasarım trendlerinden ve ilham verici kaynaklardan renk paleti önerileri sunma.

Ekip üyeleriyle paletleri paylaşma ve yorumlaşma (işbirliği) özelliği.

Pazar Analizi

7.5Puan

Kaynak: Reddit (r/SideProject)open_in_new

AI Prompt

You are an expert web application developer. Generate clean, efficient, and well-documented SvelteKit code for a single-page application (SPA) that solves the problem described below. The application should allow users to create, save, and preview color palettes with live UI previews. Implement WCAG accessibility checks and team collaboration features. Follow best practices for UI/UX design and code maintainability.

Problem: Designers and developers need a tool to easily create and preview color palettes within the context of UI elements. The current process involves scattered mood boards and tedious manual previews.

Features:
1. Color Palette Creation: Allow users to add, remove, and modify colors in a palette. Provide a color picker with hex, RGB, and HSL values.
2. Live UI Preview: Display the color palette applied to various UI components (buttons, navbars, forms, cards).
3. WCAG Accessibility: Check color contrast ratios to ensure the palette meets WCAG standards.
4. Save and Share: Allow users to save their palettes and share them with others via a unique link.
5. Team Collaboration: Enable team members to comment on and co-edit palettes.

Tech Stack: SvelteKit, Tailwind CSS, Supabase for backend (authentication and data storage).

Deliverables:
- Complete SvelteKit component code for the SPA.
- Clear instructions on setting up Supabase for the backend.
- Documentation explaining the code structure and functionality.

Ensure the code is well-structured, commented, and easy to understand. Prioritize a clean and intuitive user interface. Use modern SvelteKit features and best practices. The application should be fully functional and ready to deploy.