جوړوونکی
سوداګريزه کارونه
د 581 نمونې
هېڅ اوبه نښه
هېڅ ننوت اړين نه دی
:ډول
+ GPT-5, Claude, Gemini
Describe a layout or component and get modern CSS3 - Grid + Flexbox, custom properties, container queries, color-mix(), :has() selectors, prefers-reduced-motion. Mobile-first by default. Self-hosted Qwen 3 Coder is free under the daily pool; premium models nail complex multi-component design systems.
څرګندونه
ژور غوراوي
پایلې
.ټوکنونه کم دي
نور توکي اخيستل
❤️ د Free.ai مينه؟ خپل ملګرو ته ووايه!
د لپاره د حوالې لینک ترلاسه کولو لپاره راجستر کړئ او د هر ملګري لپاره د 30,000 ټوکنونه ترلاسه کړئ.
نور غواړﺉ؟
وړيا نوم لیکنه: 30,000 توکي / ورځ
د وړيا د ننوتلو
...ستاسې غوښتنه په کار وړي
د AI سره د وړيا لپاره د CSS کوډ توليد.
څنګه کارول جوړوونکی
1
خپل ننوت وليکﺉ
ليکنه وليکﺉ، دوتنه لېښﺉ، يا هغه څه وټاکﺉ چې غواړﺉ. هېڅ ګڼون نه اړين دی.
2
جوړولو ته کېکاږﺉ
زموږ AI ستاسو غوښتنه په ثانیو کې د غوره خلاص سرچینې ماډلونو په کارولو سره پروسس کوي.
3
رالېښنې او ونډول
ډاونلوډ، کاپي، یا ستاسو د پایلو شریکول. د شخصي او سوداګریزو کارونو لپاره وړیا.
دا توکي په API کارول
د خپل کوډ څخه دا وسیله اتومات کړئ. د OpenAI-متوافق REST پای ټکی، د بارر-ټوکن اډه، هیڅ اضافي SDK اړتیا نلري. د توکو لګښتونه د ویب انٹرفیس سره مطابقت لري.
curl -X POST https://api.free.ai/v1/chat/ \
-H "Authorization: Bearer sk-free-..." \
-H "Content-Type: application/json" \
-d '{"model": "qwen-coder", "messages": [{"role": "user", "content": "Write a Python function that reverses a string."}]}'جوړوونکی - FAQ
عصري CSS3 - ګریډ + فلکسبکس ترتیبات، د پیرودونکو ملکیتونه (CSS متغیرات)، د کانټینر پوښتنې، رنګ-مکس ()،: د () انتخاب کونکي، منطقي ملکیتونه، د خوښې-کم شوي حرکت فلیپونه. د 8 سټایل پریسټونه (وینیل / ټیلوینډ کنفیګ / ساسس / CSS ماډلونه / بیم / اتومیک وسیله / د چاپ سټایل شیټ / انیمیشن). د کانټینر پوښتنو سره د تل لپاره د موبایل لومړی چیرې چې دوی د رسنیو پوښتنې کوي.
هو - د بشپړ اجزاو سټایل شیټ د Qwen 3 کوډر کې د ~ 1,000 ټوکنونو لګښتونه، د 6,000 نامعلوم / 30,000 ورځني پوښښ دننه. د پریمیم Claude Sonnet / GPT-5 د پیچلي څو برخو ډیزاین سیسټمونو لپاره د هر کال لپاره شتون لري.
د ویرسیل لخوا v0 (د وړیا کچه + $ 20 / mo پرو) د ریکټ + ټیلوینډ برخې رامینځته کوي. د ټیلوینډ UI ($ 299 ژوندی) د تادیې برخې کتابتون دی. کرسر ($ 20 / mo) او کوپیلوټ ($ 10-39 / mo) د IDE دننه مرسته کوي. زموږ وسیله یو-شوټ CSS ده - یو توضیحات پټ کړئ، د کراس بریښنالیک خوندي CSS ترلاسه کړئ. د ټیلوینډ سره ښه ملګرتیا: د ټایلوینډ کنفیګ ته پریمیم بدل کړئ او موږ به د خام CSS پرځای د tailwind.config.js + د کارونې کلاسونه ولیکئ.
هو - د CSS د دودیز ملکیتونو لپاره د CSS، د کاسکډ کنټرول لپاره @layer، د کانټینر پوښتنې (@ کانټینر) چیرې چې د مور-رښتیني اندازه د ویډیو پورټونو،: د مور پر بنسټ سټایل لپاره () لري، د رنګونه لکه رنګ-مکس () او د لاسرسي وړ رنګ manipulation لپاره OKLCH.
د Tailwind config preset غوره کړئ. محصول د Tailwind 3.x د کارونې ټولګي دي چې ستاسو tailwind.config.js ته وصل شوي (چې موږ یې په څنګ کې تولید کوو که تاسو د موضوع دودیز کولو لپاره وغواړئ). د HTML مارکپ لپاره چې ټولګي راټولوي، / code / html / ته بدل کړئ او د Tailwind preset غوره کړئ.
د Sass preset غوره کړئ. د محصول کاروي. د @ use ماډلونو سره د.scss سیټ (نه د ړنګ شوي @import) سره، د نښلولو چیرته چې دا روښانه کوي (نه لکه د سجاوٹ په توګه)، د بیا کارولو نمونو لپاره @mixin، د ارزښت محاسبه لپاره @function. د Dart Sass 1.50 + سره مطابقت لري.
د ژوندۍ انځور د مخکښ انتخاب. د خروجي سره د مکعب-bezier وخت سره @keyframes کاروي، prefers-reduced-movement: د لاسرسي لپاره overrides کمول، به-د بدلون په يوازې د ځانګړتياوو چې ژوندۍ انځور. CSS-هغه ځای چې ممکنه ده (transforms، opacity)؛ JavaScript hooks وړاندیز شوي یوازې د غیر CSS-توانه اغېز.
دواړه - د.block__element لپاره BEM غوره کړئ - د بدلون نومول، یا د واحد موخې کلاسونو لپاره اتومي ګټه. د نومونو د تصادم پرته د برخې-شموله CSS لپاره د CSS ماډلونه غوره کړئ، کوم چې په سیمه کې د شمول کلاس نومونه تولیدوي.
هو - هر یو د CSS دودیز ملکیتونه کاروي چې د [د معلوماتو موضوع = تور] څخه لرې شوي او د رنګ
د هرډول کروم / فایرفوکس / سافیر (د وروستیو دوه مستحکم خپرونو) هدف کوي. د کټ-پټ ځانګړتیاو لپاره د @ ملاتړ بلاکونه کاروي (: has (، د کانټینر پوښتنې) چیرې چې د Safari 16 + اهمیت لري. د فلکسبکس ته بیرته راځي چیرې چې زاړه Safari تاسو سره مبارزه کوي. د IE11 ملاتړ لپاره - بخښنه غواړم، تاسو باید / کوډ / ریفکتور / وکاروئ ترڅو د محصول لاسي بکس ته بیرته راستون شئ.
د چاپ کولو سټایل شیټ غوره کړئ. د محصول په @media چاپ کې هرڅه پوښي، د رنګ تنظیم تنظیموي: د پس منظر لپاره دقیق، د NAV او کروم پټوي، د عکسونو اندازه په منطقي ډول، د مینځپانګې سره پاکې پاڼې مینځ ته راوړي: په کارتونو کې مخنیوی وکړئ. د @page له لارې د پاڼې لارښود.
هو - د / v1 / chat / سره د ورته سیسټم سره د دې پا pageې جوړولو سره POST. د بارر اېټ، د نرخ محدود. د ډیزاین-ټوکن پایپ لاینونو یا د برخې-لیکتون تولید لپاره ښه. په / api / کې د Docs.
تاسو به دا توکي څنګه کچول غواړﺉ؟